前端CLI脚手架

Posted by huangqing on January 10, 2022

package.json 中的 bin 字段

前端项目还是 node 项目,一般都会用 npm 做包管理工具,而 package.json 是其相关的配置信息。

node 项目而言,模块导出入口文件由 package.jsonmain 字段指定,而如果是要安装到命令行的工具,则是由 package.jsonbin 字段指定。

配置单个命令

与包名同名

{
  "name": "pro",
  "bin": "bin/pro.js"
}

这样安装的命令名称就是 pro

自定义命令名称(与包名不同名)

{
  "name": "pro-cli",
  "bin": {
    "pro": "bin/pro.js"
  }
}

这样安装的命令名称也是 pro

配置多个命令

{
  "name": "pro-cli",
  "bin": {
    "pro": "bin/pro.js",
    "mini": "bin/mini.js"
  }
}

这样安装就有 promini 两个命令。

对应 bin/pro.js 文件的写法

#!/usr/bin/env node

require('../lib/pro');

与普通的 js 文件写法一样,只是前面要加上 #!/usr/bin/env node。

这段前缀代码叫 shebang,具体可以参考 Shebang (Unix) - Wikipedia.

安装方式

全局安装

npm i -g pro-cli

这种安装方式可以在命令行全局使用。

pro dev

pro build

本地安装

npm i --save-dev pro-cli

这种安装方式需要配合 npm 一起使用,比如:

package.json :

{
  "scripts": {
    "dev": "pro dev",
    "build": "pro build"
  }
}

使用 :

npm run dev
npm run build

参考