其实开发一个自己的 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 网站上搜索包名或者通过如下命令查看是否已经存在同名包:
代码语言:shell复制npm view <packageName>
初始化项目配置文件参考:
代码语言:json复制{
"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 包源码目录下输入命令:
代码语言:shell复制npm link
这样就会在本地的全局 npm 目录中创建一个我们自己的包的符号链接,可以通过 npm list -g 命令来查看是否生效。然后再到需要使用我们的包的项目目录中,输入命令:
代码语言:shell复制npm link <packageName>
这样项目中就通过上一步设置的全局软链接链接到了我们本地的 npm 开发目录,使用的时候就和项目中的 node_modules 目录下安装的依赖一样的效果。而且直接修改本地的 npm 包源码,项目中使用时也会实时生效,这样对我们本地调试就很方便。
清理
调试完成后后,我们需要清理掉本地的设置。清理掉全局的软链接,随便在哪终端命令输入:
代码语言:shell复制npm unlink -g <package-name>
清理项目中使用的全局软链接,在项目的根目录输入:
代码语言:shell复制npm unlink <package-name>
5、npm login 登录账号
注意在终端中输入 npm login 登录的时候报错或者自动在浏览器中打开了其他网页,一般是因为我们设置了国内 npm 镜像源导致的,当需要发布 npm 包时我们需要切换到官方的仓库才可以发布的,可以通过如下设置:
查看 npm 配置信息
代码语言:shell复制npm config list
删除设置的镜像源
代码语言:shell复制npm config delete registry
设置成 npm 官方地址
代码语言:shell复制npm config set registry https://registry.npmjs.org/
根据提示输入账号、密码、邮箱和 One Time Password 密码登录,登录成功了会在控制台提示你。
6、npm publish 发布项目
登录成功后,接着输入 npm punlish 就可以发布项目了,成功后也会有相应提示,然后邮箱里也会收到一封发布成功的邮件。