来源: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 License
Copyright (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包的一些流程 自己也学习了不少。