小白接了一个新的任务,想要开发一个npm包。将这个包加载到项目中,通过一个命令就可以直接升级组件库的版本,并修改相关的依赖。听起来好像挺简单的样子,但是这个任务,小白我整整做了三天/(ㄒoㄒ)/~~
今天先来为大家介绍一下,如何开发一个npm包。
开发
基础配置
新建文件夹,执行npm init
命令,配置package.json文件。依次输入项目名称,版本等信息,完成基础配置。
package.json
,package-lock.json
,README.md
的基础配置后,下面就可以写代码了。
编写代码
因为之前没有开发过npm包的经验,所以小白就去参考了我们最常使用的npm包--eslint
。看到了第一个文件夹bin
.
我们开发npm包,并且想要通过命令直接执行,那么需要在这个包下配置可执行模块。怎么实现呢?npm的package.json文件可以通过bin属性可以帮助你指定各个内部命令对应的执行的文件。
// package.json
"bin": {
"upgrade": "./bin/index.js"
}
感觉有点抽象。简单的理解,就是bin
目录下存放的是可直接执行的js文件,这个js文件是已经编译好的,符合ES5语法的,可直接执行的。我们在package.json中配置好命令,那么输入命令,我们就可以直接在bin中执行js文件来实现对应的功能了。
如果你的包要是实现的功能较多较复杂,那么把文件都放在bin目录中显然不合适。所以这时候你就可以拆出来各个文件夹来完成不同的功能,如lib
、config
等,最后引入到bin文件夹中即可。
命令行参数
因为我实现的功能是想要通过命令来升级组件库版本,比如说输入命令upgrade 13.1.1
,这样,就需要获得输入的参数13.1.1
。
Node中的process.argv
属性,可以让你读取到命令行中的参数。
process.argv 属性返回一个数组,其中包含当启动 Node.js 进程时传入的命令行参数。 第一个元素是 process.execPath。第二个元素将是正在执行的 JavaScript 文件的路径。 其余元素将是任何其他命令行参数。
直接通过process.argv
这个数组来读取是一种方法,但是要是输入的参数较多,我们较难区分到底第几个元素是我们需要的参数。所以可以通过一些工具来更好的解析参数。如minimist,commander等。
测试
完成代码后这时候需要测试你的包的功能是不是正常了,可是我现在又不想把这个包发布,那么如何在本地连接我的项目进行测试呢?npm link
来帮助你解决这个问题。
npm link
命令可以将你开发的npm包链接到对应的项目中,在该项目中,你就可以直接通过命令来执行你开发的npm包了。
- 开发的npm包根目录下执行
npm link
. - 在需要使用该包的项目根目录下执行
npm link <name>
,name是你开发的npm包所在的文件夹的名称。 - 在项目下执行包的命令测试,如
upgrade 13.1.1
。
发布npm包
当你测试过后发现你开发的npm包没有任务问题了,那么你就可以将你的包发布到npm的官网或者你需要的私有仓库中了。
- 首先在package.json中配置发布的仓库。若是不设置,将默认发布到npm官网。
"publishConfig": {
"registry": "" //仓库地址
},
- 在npm官网注册用户。官网注册地址
- 在你开发的包下面首先添加你的账户。按照提示依次输入用户名,密码,注册邮箱信息。
// 在根目录执行命令
> npm adduser
- 若是你之前有添加过你的账户,那么你可以直接执行
npm login
命令。 - 登陆之后,执行
npm publish
命令,你的包就成功发布了。
以上就是开发一个npm包的过程,当然你想要实现具体的功能还有许多工作要做。比如说我的任务,需要先git clone组件库项目,读取对应的package.json文件。若是有具体的版本还需要切换分支等。这就涉及到更多的知识点,比如说需要node执行系统命令,通过process.cwd()
来获得项目路径等。在下一篇文章中,我会详细介绍我是如何这个完成任务的。