开发一个npm包,你会吗?

1,916 阅读4分钟

小白接了一个新的任务,想要开发一个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目录中显然不合适。所以这时候你就可以拆出来各个文件夹来完成不同的功能,如libconfig等,最后引入到bin文件夹中即可。

命令行参数

因为我实现的功能是想要通过命令来升级组件库版本,比如说输入命令upgrade 13.1.1,这样,就需要获得输入的参数13.1.1

Node中的process.argv属性,可以让你读取到命令行中的参数。

process.argv 属性返回一个数组,其中包含当启动 Node.js 进程时传入的命令行参数。 第一个元素是 process.execPath。第二个元素将是正在执行的 JavaScript 文件的路径。 其余元素将是任何其他命令行参数。

直接通过process.argv这个数组来读取是一种方法,但是要是输入的参数较多,我们较难区分到底第几个元素是我们需要的参数。所以可以通过一些工具来更好的解析参数。如minimistcommander等。

测试

完成代码后这时候需要测试你的包的功能是不是正常了,可是我现在又不想把这个包发布,那么如何在本地连接我的项目进行测试呢?npm link来帮助你解决这个问题。

npm link命令可以将你开发的npm包链接到对应的项目中,在该项目中,你就可以直接通过命令来执行你开发的npm包了。

  1. 开发的npm包根目录下执行npm link.
  2. 在需要使用该包的项目根目录下执行npm link <name>,name是你开发的npm包所在的文件夹的名称。
  3. 在项目下执行包的命令测试,如upgrade 13.1.1

发布npm包

当你测试过后发现你开发的npm包没有任务问题了,那么你就可以将你的包发布到npm的官网或者你需要的私有仓库中了。

  1. 首先在package.json中配置发布的仓库。若是不设置,将默认发布到npm官网。
"publishConfig": {
        "registry": "" //仓库地址
    },
  1. 在npm官网注册用户。官网注册地址
  2. 在你开发的包下面首先添加你的账户。按照提示依次输入用户名,密码,注册邮箱信息。
// 在根目录执行命令
> npm adduser
  1. 若是你之前有添加过你的账户,那么你可以直接执行npm login命令。
  2. 登陆之后,执行npm publish命令,你的包就成功发布了。

以上就是开发一个npm包的过程,当然你想要实现具体的功能还有许多工作要做。比如说我的任务,需要先git clone组件库项目,读取对应的package.json文件。若是有具体的版本还需要切换分支等。这就涉及到更多的知识点,比如说需要node执行系统命令,通过process.cwd()来获得项目路径等。在下一篇文章中,我会详细介绍我是如何这个完成任务的。