来源：https://blog.csdn.net/yiershan1314/article/details/79999726

这一段时间一直在写自己的组件 就突发奇想把这些组件放到npm库上去。所以找来资料学习并记录一下

生成package.json

npm init -y

生成一个package.json文件 内容如下

{"name": "npm","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}

可以在此基础上设置默认的生成值 以下我是复制的 根据自己的情况填写

npm config set init-author-name "yiershan"             # 你的名称
npm config set init-author-email "511176294@qq.com" # 你的邮箱
npm config set init-author-url "https://www.jianshu.com/u/8afb7e623b70"  # 你的个人网页
npm config set init-license "MIT"                    # 开源授权协议名
npm config set init-version "0.0.1"                         # 版本号

删掉之前的package.json 再生成一个package.json 

添加一个README.md文件

可以在这个文件里简单介绍下项目

# MZC-Ng-Api这是一个npm包发布测试项目## License请查看 [MIT license](./LICENSE).

添加一个开源协议文件 LICENSE

我是不知道这东西有什么用 但先加上去

MIT LicenseCopyright (c) 2017 MZC本项目为测试项目，完全免费。

添加源码

创建一个src文件夹 并在下面添加一个index.ts文件

export class NgGezc{private name: string;constructor() {this.name = 'gezc'}
}

再在于src同级的目录下创建一个index.t文件

export * from './src/index

使用typescript编译ts文件

如果没有安装typescript就先安装

npm i -g typescript

再执行初始化tsconfig.json文件命令

tsc --init

就会自动生成一个一个tsconfig.json文件

编译

tsc -p .

执行成功就生成了js文件，这个 . 很重要 不写会找不到想要编译的文件。我一开就眼瞎没看到

文件解构

发布

大致的npm模块结构是出来了

可以先修改package.json文件

{"name": "ng-gezc", // 主要是名字别出现 大写字母"version": "1.0.0","description": "测试系统","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "gezhenchao <1218969916@qq.com>","license": "MIT"
}

修正下载源

这一步 我觉得大概的原因是防止 将下载源 改为了其他的一些镜像地址 毕竟国内用npm下载的速度。。。

npm config set registry https://registry.npmjs.org/

登录npm

没有npm账号的可以去注册一个 注册地址 https://www.npmjs.com/signup

注册很方便 只要验证下邮箱就可以了

npm login

输入 账号密码就可以了

发布

想想还有点小激动  可以发布自己的npm模块了

npm publish

现实还是残酷的 我可耻的失败了

错误信息是： you must verify your email before publishing a new package: https://www.npmjs.com/email-edit : ng-gezc

意思大概是我的账号邮箱没有验证  因为一连发了3封邮件 第1封才是验证的邮件 （我以为是第3封）

验证完就发布成功了

发布一个模块确实挺方便的

 

使用

新建一个文件夹  将自己发布的模块下载下来

npm i ng-gezc

下载下来的文件目录

但在开发中使用没有提示（老实说 写博客的时候我并不知道这一点）

编译时生成头文件，*.d.ts。

解决编译器提示功能 
修改tsconfig.json中的设置（在发布的项目那里改，别再node_modules 下改） 

之后

tsc -p .

就生成了*.d.ts文件

tsconfig.json中的设置有时间可以研究下 有时间再写一篇博客

修改package.json 发布指定的文件

{"name": "ng-gezc","version": "1.0.0","description": "测试系统","main": "index.js","types": "./index.d.ts", // 添加这个"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"files": [ // 不将 tsconfig.json 发不上去"index.js","index.d.ts","src/*.js","src/*.d.ts","src/**/*.js","src/**/*.d.ts","README.md","LICENSE","package.json"],"keywords": [],"author": "gezhenchao <1218969916@qq.com>","license": "MIT"
}

说一句的是不能将注释写在package.json, 因为json文件里不能写注释的

更新版本

修改了这些就得再发布一次 那模块的版本就得更新

npm version prepatch

版本发布规则

# 版本号从 1.2.3 变成 1.2.4-0，就是 1.2.4 版本的第一个预发布版本。
npm version prepatch# 版本号从 1.2.4-0 变成 1.3.0-0，就是 1.3.0 版本的第一个预发布版本。
npm version preminor# 版本号从 1.2.3 变成 2.0.0-0，就是 2.0.0 版本的第一个预发布版本。
npm version premajor# 版本号从 2.0.0-0 变成 2.0.0-1，就是使预发布版本号加一。
npm version prerelease

规则挺多 让我 思考量不足的大脑好好想想

版本更新好了就再发布一次

npm publish

之后再下载一次

发现少了ts文件和tsconfig.json文件

这篇博客 主要是记录了一下 发布npm包的一些流程  自己也学习了不少。