前文
npm包管理工具前端同学应该不陌生了,npm平台上有大量的优秀包,我们只需要简单几行命令就能下载下来我们想要的东西,不用到处求种,而且版本控制十分方便。如何将自己的组件或者插件发布到npm平台上去,方便项目中使用和其他人使用,本文介绍如何将一个组件发布到npm平台上去。
步骤非常简单,请按照笔者的步骤一步一步走,操作慢一点的话俩个小时之内也搞定了。部分坑笔者已踩过,并留下了解决方案,欢迎补充。
一、项目准备
发布到npm平台的包,是一个项目工程,跟我们平时工作中的项目类似,应该有完整的一套构建,开发,测试,打包压缩等步骤,所以应该把这个包当成一个项目来对待。
具体文件目录结构可参考:
wd-canvas2image
├── example # 存放demo的代码,帮助他人了解你的插件如何使用
│ ├── src
│ │ ├── wdCanvas2Image.js
│ │ └── index.js
│ └── index.html # 示例页面
├── rollup.config.js # rollup配置文件 // 笔者用的rollup,你可以自行选择webpack等
├── index.js # 你的插件入口文件
├── package.json # 你的插件信息 // 可以通过npm init生成然后补全信息
├── HISTORY.md # 版本更新记录
└── README.md # 写一些说明
这里要注意的点:
- 原文件:项目原文件在src下,原文件用ES6编写。原文件不可直接使用,需要打包编译之后才能使用。
- 编译:编译方式有很多种,笔者使用的rollup。
- demo:项目里有个example文件夹,里面是项目示例代码,本地开发的时候跑的项目;也有的包里面是docs文件夹,文档形式介绍。
- 测试:有的包本地开发的时候会有测试脚本,本地会有一个test文件夹,用于存放测试脚本。
项目完成之后,需要添加一个入口文件index.js,将你的组件导出:
也可以在编译的时候直接就编译成index.js。笔者就是这么做的
***
***
var Index = WDCanvas2Image;
exports.default = Index;
需要改一下package.json里面的配置文件:
参考文档:https://docs.npmjs.com/files/package.json
{
"name": "wd-canvas2image",
"version": "0.0.12",
"author": "Brian<csdnwuxiaodi@qq.com>",
"description": "将canvas转换为image的实用包",
"keywords": [
"canvas",
"image",
"function",
"tools"
],
"repository": {
"type": "git",
"url": "https://github.com/wudi98/wudi_canvas2image.git"
},
"homepage": "https://github.com/wudi98/wudi_canvas2image",
"bugs": {
"url": "https://github.com/wudi98/wudi_canvas2image/issues"
},
"main": "src/index.js",
"scripts": {
"build": "rollup -c"
},
"dependencies": {
"html2canvas": "^1.0.0-rc.5",
"wd-canvas2image": "^0.0.10"
},
"license": "MIT"
}
上述代码唯一需要介绍的就是“license”。
这个 license 就是开源许可说明,各大组织设立了为代码开源许可的规范文档,当作者声明此文档类型时,他人必须遵守该文档类型的规范。
详细介绍可看:七种开源许可证
// 不会被npm忽略的文件
package.json
README (and its variants)
CHANGELOG (and its variants)
LICENSE / LICENCE
// 一定会忽略的
node_modules
.*.swp
._*
.DS_Store
.git
.hg
.npmrc
.lock-wscript
.svn
.wafpickle-*
config.gypi
CVS
npm-debug.log
二、npm发布
1. 发布步骤
项目已经准备好了,接下来可以着手发布了。首先npm上注册账号,别忘了去邮箱验证。
注册地址:https://www.npmjs.com/
然后输入:
npm adduser
接下来会以问答的形式向你了解你的用户名、密码以及公开的邮箱
之后输入
npm publish
然后看到进度条走,之后组件发布成功,可以到npm上搜索自己的包了。
注意点:
1.每次提交版本号都要比上次的高
2.如果提示包不能为private,需要执行下面的发布方式:npm publish --access public
最后说一下版本管理。
一般来说版本分成三部分:A.B.C
A表示大版本号,一般是项目较大改动的时候修改。A为0的时候,表示项目处于开发阶段。
B表示功能更新,或者项目模块改动的时候增加。
C表示小改动,如修bug。
2. 一些常见的错误
- no_perms Private mode enable, only admin can publish this module
这是因为镜像设置成淘宝镜像了,设置回来即可
$ npm config set registry http://registry.npmjs.org
- npm publish failed put 500 unexpected status code 401
一般是没有登录,重新登录一下 npm login 即可 - npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?
包名被占用,改个包名即可。最好在官网查一下是否有包名被占用,之后再重命名 - you must verify your email before publishing a new package
邮箱未验证,去官网验证一下邮箱
三、持续集成
一般来说你会看到一些项目README.md里面有一些icon如:
这些icon看起来很牛逼,但也不只是装逼用的。
持续集成(Continuous integration)的目的,就是让产品可以快速迭代,同时还能保持高质量。它的核心措施是,代码集成到主干之前,必须通过自动化测试。只要有一个测试用例失败,就不能集成。
每个icon都表示一个功能,这里不多做介绍。
四、删除包
请点击查看:怎样删除npm里已经发布的包?
五、总结
经过上述操作,就可以完成了向npm平台发布一个包的过程,发布到npm的组件要持续维护。否则其他用了你的插件的人会被你坑的很惨的。。。。。