NPM 制作命令行工具

NPM 制作命令行工具 - 入门案例

news2024/12/23 18:59:52

一、简介

经常通过 npm 安装 vue-cli、create-react-app 之类的命令行工具，那么如何简单的制作一个命令行工具呢？只需要几步即可！

二、制作

创建 npm 命令行工具文件夹（例如：dzm-cli）

初始化 dzm-cli，得到 package.json 配置文件。

$ npm init -y

{
  "name": "dzm-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

根目录新建 index.js，添加测试代码

#!/usr/bin/env node

// 输出命令带的参数
console.log(process.argv)

可以本地测试执行下 index.js，

$ node index.js

# 输出
[
  '/Users/xxx/.nvm/versions/node/v16.20.0/bin/node',
  '/Users/xxx/Desktop/Project/dzm-cli/index.js'
]

$ node index.js 参数1 参数2 参数3 ....

# 输出
[
  '/Users/xxx/.nvm/versions/node/v16.20.0/bin/node',
  '/Users/xxx/Desktop/Project/dzm-cli/index.js'
  '参数1',
  '参数2',
  '参数3'
]

然后在 package.json 中添加 bin 字段

bin 字段的 key 就是命令（例如：vue-cli、create-react-app）

value 指向该命令对应的脚本路径（例如：index.js）

不同的 key 对应不同的命令跟处理脚本

这里指定一个 dzm-cli 命令，并指定刚新建的 index.js 最为处理脚本，然后对 package.json 可以进行简化下，需要什么其他配置字段可以自己加：
```
{
  "name": "dzm-cli",
  "version": "1.0.0",
  "description": "",
  "bin": {
    "dzm-cli": "index.js"
  }
}
```

三、本地测试与发包

先本地测试一下，在 package.json 目录通过创建本地软链进行测试
```
# 创建测试链接
$ npm link

# 移除测试链接
$ npm unlink dzm-cli
```
执行后 npm 本地就会通过项目中 package.json 的 bin 字段创建对应的命令可执行文件，然后就可以直接使用命令测试了。
```
$ dzm-cli

$ dzm-cli 参数1 参数2 参数3
```
测试没有问题后，可以通过 $ npm publish 发包了！注意：发包时必须保证 npm 源为官方源，不能是第三方源，要不然会发包失败！没有 npm 账号的自行官网注册一个。（附：NPM 上传发布详细流程）

三、使用

发包成功后，项目中安装测试一下
```
$ npm i -g dzm-cli
```

项目中使用

$ dzm-cli

# 输出
[
  '/Users/xxx/.nvm/versions/node/v16.20.0/bin/node',
  '/Users/xxx/Desktop/Project/dzm-cli/index.js'
]

$ dzm-cli 参数1 参数2 参数3

# 输出
[
  '/Users/xxx/.nvm/versions/node/v16.20.0/bin/node',
  '/Users/xxx/Desktop/Project/dzm-cli/index.js'
  '参数1',
  '参数2',
  '参数3'
]