其实开发一个自己的 npm 包也不难，如果一个东西需要在我们很多项目中复用，那封装成一个公共的 npm 包就是一个很好的方式，也方便统一维护和管理，步骤主要有以下6个步骤：
- 注册 npm 账号
- 初始化项目
- 开发项目
- 本地调试
- npm login 登录账号
- npm publish 发布项目
1、注册 npm 账号
直接去 npm 官方网站 https://www.npmjs.com/ 注册账号，注册成功了才可以在本地用命令行登录。
2、初始化项目
跟我们平时初始化前端项目一样，直接输入 npm init 初始化项目。注意要发布到 npm 公共仓库里 private 属性要设置为 false，还确保 package.json 中的 name 字段是唯一的，否则发布时会失败，可以自己在 npm 网站上搜索包名或者通过如下命令查看是否已经存在同名包：
npm view <packageName>
初始化项目配置文件参考：
{
"name": "vant-tree-shaking",
"version": "1.0.1",
"description": "小程序按需引入vant组件，自动清除项目中未使用的vant组件，减少代码包大小，避免因未使用到的 vant 组件触发隐私协议提交审核时被拒",
"bin": {
"vant-tree-shaking": "bin/vant-tree-shaking.js"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/cafehaus/vant-tree-shaking.git"
},
"keywords": [
"vant",
"tree-shaking",
"miniapp",
"wechat",
"vue"
],
"author": "cafehaus",
"email": "510878689@qq.com",
"license": "MIT",
"bugs": {
"url": "https://github.com/cafehaus/vant-tree-shaking/issues"
},
"homepage": "https://github.com/cafehaus/vant-tree-shaking#readme"
}
还有一点需要注意的是配置文件中的版本号 version 里面的值，每次发布的时候只能在前一次的基础上往上增加，否则发布的时候也会失败。
3、开发项目
很多人一想到封装这些就觉得是一件很难的事，其实除了前端中我们经常用到的 ui 组件库，还有很多东西都是可以自己来封装成 npm 包的，哪怕只是一个处理某些数据的 function 函数同样是可以发布成 npm 包的。当然，这里也不推荐大家往 npm 上随便发布一些无意义的包，但是对于我们很多项目中用到的一些自己的公共方法，就完成可以封装成一个自己的 npm 包以便在不同的项目中复用。
我们常用的大部分 npm 包主要集中在3大类：
- ui 库，如 element-ui
- 方法库，如 lodash
- 命令行，如 vue cli
刚开始可以从比较简单的命令行工具入手，就比如上面配置文件中的 vant-tree-shaking，所有代码就一个110行的 js 文件，然后设置下 package.json 配置文件中的 bin 字段，这样别人 npm install vant-tree-shaking 安装好包后就可以直接通过命令行来使用这个包了。
4、本地调试
本地设置
先将本地的 npm 包链接到全局，直接在本地 npm 包源码目录下输入命令：
npm link
这样就会在本地的全局 npm 目录中创建一个我们自己的包的符号链接，可以通过 npm list -g 命令来查看是否生效。然后再到需要使用我们的包的项目目录中，输入命令：
npm link <packageName>
这样项目中就通过上一步设置的全局软链接链接到了我们本地的 npm 开发目录，使用的时候就和项目中的 node_modules 目录下安装的依赖一样的效果。而且直接修改本地的 npm 包源码，项目中使用时也会实时生效，这样对我们本地调试就很方便。
清理
调试完成后后，我们需要清理掉本地的设置。清理掉全局的软链接，随便在哪终端命令输入：
npm unlink -g <package-name>
清理项目中使用的全局软链接，在项目的根目录输入：
npm unlink <package-name>
5、npm login 登录账号
注意在终端中输入 npm login 登录的时候报错或者自动在浏览器中打开了其他网页，一般是因为我们设置了国内 npm 镜像源导致的，当需要发布 npm 包时我们需要切换到官方的仓库才可以发布的，可以通过如下设置：
查看 npm 配置信息
npm config list
删除设置的镜像源
npm config delete registry
设置成 npm 官方地址
npm config set registry https://registry.npmjs.org/
根据提示输入账号、密码、邮箱和 One Time Password 密码登录，登录成功了会在控制台提示你。
6、npm publish 发布项目
登录成功后，接着输入 npm punlish 就可以发布项目了，成功后也会有相应提示，然后邮箱里也会收到一封发布成功的邮件。
