用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，默认包名后面@版本号，例如 packageName@0.0.1，而此版本号就是 package.json 中的 version 号

但是当你删除已经上传到 npm 的包，务必重命名 version 号例如 0.0.2，要不程序报错

不能 unpublish

如果不能 npm unpublish，那么就在后面追加版本号或者–force，例如 npm unpublish packageName@0.0.1 后者 npm 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 包一共打了几个标签

先写这么多，后续在更新！