用npm发布一个vue组件包的流程
npm发布包流程
1.进入npm官网,注册帐号
2. 进入已经写好的组件, 登录npm帐号,命令
npm login
如下图:
注意:一定要确保本地镜像为 npm,不然无法提交成功。
// 1.查询当前配置的镜像 npm get registry //https://registry.npmjs.org/ // 设置成淘宝镜像 npm config set registry http://registry.npm.taobao.org/ // 换成原来的 npm config set registry https://registry.npmjs.org/
3. 执行命令发布一个包,命令如下
npm publish
如下图:
提示:新手注册npm账号后,记得要到邮箱点开链接认证,否则会报
npm ERR! 403 Forbidden you must verify your email before publishing a new package
导致发布不成功,如下图显示
按照此操作即可发不成功。
如何删除npm上发布的包呢?
很多小伙伴在执行了发布版本后,想删除旧版本或者是不想要的版本,这时候我们需要执行删除命令
npm unpublish
然而大家发现并没卵用,这是什么原因呢?
版本号问题
npm pack之后npm publish,[email protected],[email protected],而此版本号就是package.json中的version号
但是当你删除已经上传到npm的包,务必重命名version号例如0.0.2,要不程序报错
不能unpublish
如果不能npm unpublish,那么就在后面追加版本号或者–force,例如npm unpublish [email protected] unpublish packageName –force(请确保该包只属于你自己)
修改配置文件
package.json的以下字段需要注意
- name
- version
- description
- keywords
- author
- license
- repository
- main
- unpkg
- module
- scripts
- engines
name就是发布到npm上的包名,也即别人安装时输入的名字yarn add${name},包名应该是kebab-case,即英文单词全小写,中划线分割(lower case and dash-separated)
version是语义化的,major.minor.patch.如果是major变动,通常意味着不兼容的修改;如果是minor,意味着添加向后兼容的新功能,如果是patch,意味着bug的修复。详情
description是对包的描述,在npmjs.com上搜索时会显示,有助于用户在搜索时进行筛选
keywords同样也是帮助用户查找到你的包
author的格式一般是${your name}${email},当然也可以是一个github地址
license可能很多人会忽略,最好也写上去。至于用哪个,vue的官方项目全是MIT,因此我也是MIT,不纠结
repository的格式参考如下:
"repository": { "type": "git", "url": "github地址" }
这样在npm包页面就有会个github的入口
main定义了包的入口文件,在NodeJs环境,语句import pkg from’package-name’时,其实导入的就是main定义的文件,它可以是CommonJs格式的,也可以是umd格式
需要注意的是,当你把一个包发布到npm上时,它同时也可以在unpkg上获取到。也就是说,你的代码既可能在NodeJs环境也可能浏览器环境执行。为此你需要用umd格式打包,并且在package.json定义unpkg字段,一般而言此时它的命名为name.min.js
最后,别忘了定义module或jsnext:main字段,它表示用ES6模块格式打包,给Webpack 2+或Rollup等先进的构建工具来处理。
我们来看一下三个字段的示例:
"main": "dist/mybj.js", "unpkg": "dist/mybj.min.js", "module": "dist/mybj.esm.js"
scripts 为了防止出现发包前忘记构建的乌龙事件,定义一下发布前的脚本, 这样每次执行npm publish前都会先执行npm run build
"prepublishOnly": "npm run build"
engines 可以告诉用户运行你的包对NodeJs版本的要求,这是非常重要的,不然你使用了NodeJs新版本特性,却没有定义该字段,导致低版本NodeJs用户运行报错,让人摸不着头脑。
定义依赖
当你开发一个项目时,比如一个静态网站或一个单面应用,dependencies和devDependencies并没有太多区别,因为你npm install或yarn时,这些依赖都会下载下来,因为你是在开发。
但对于发布到npm的包则不同:
dependencies是运行你的包必须安装的依赖,即当用户yarn add my-awesome-package时,这些依赖也会下载。
devDependencies是开发你的包时需要安装的依赖,比如eslint,jest等开发工具,当用户yarn add my-awesome-package时,这些依赖并不会下载!
peerDependencies一般用于开发插件的场景,它要求用户必须预先安装了某些依赖。比如开发webpack的插件,如果你把对webpack的依赖定义成dependencies,如果用户安装的webpack跟dependencies里的minor版本不一致,则用户yarn add my-webpack-plugin时会把dependencies定义的webpack也下载下来,也即用户会安装两个major版本相同的webpack,这就不合适了。
所以说,定义好你的包的依赖,可以让用户安装使用你的包时少点困惑,多些愉悦。
忽略文件
如果有.gitignore文件,则发布时会忽略.gitignore中定义的文件;也即这些文件不需要在.npmignore重新定义。如果用.gitignore忽略了dist目录,但发包时又需要发布dist目录,此时可以在package.json定义files字段,这是一个白名单,里面的文件都会被发布出去
"files": [ "dist" ]
需要注意的是,子文件夹.gitignore或.npmignore同样有效,而它们会覆盖files字段
另外,有些文件无论如何设置,都不会发布出去:
- node_modules
- .git(包括.gitignore)
README.md
别忘了这个文件,写下与包相关的更具体的信息,告诉用户这个包有哪些功能,如何使用。这很重要,用户不会使用一个没有文档说明的包!
发布
一个版本只能发布一次,为了避免每次手动修改package.json,可以使用npm version[major|minor|patch]命令来更新package.json里的版本
打标签
假设你的包最新版本是1.0.0,当用户yarn add my-awesome-package或yarn add my-awesome-package 1.0.0时,其实是相当于yarn add my-awesome-package latest,即不指定标签安装时,默认安装latest版本。
假设你正在开发2.0.0版本,它还不稳定,你想发布它让用户测试一波,此时又不能让它变成latest版本,不然用户yarn add my-awesome-package时就安装了2.0.0了,那将让用户崩溃。这时该怎么办呢?标签就用上场了。
可以这样发布
npm publish --tag beta
则用户yarn add mybj-package安装的是1.0.0版本,yarn add mybj-package beta时,安装的是2.0.0版本,不影响老用户,棒!🎉
记住,你只能对一个版本打一个标签,使用
npm dist-tag ls
可以查看npm包一共打了几个标签
先写这么多,后续在更新!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 用npm发布一个vue组件包的流程