node编写cli命令行(一)

node编写cli命令行(一)

前端日常开发中，会遇见各种各样的cli，比如一行命令帮你打包的 webpack，一行命令帮你生成vue项目模板的vue-cli，还有创建react项目的create-react-app等等。那么这些脚手架是什么编写的？下面演示一下如何制作一个vue-temp-cli 脚手架。

1.先编写node脚本

1.新建一个vue-temp-cli 文件夹

`-- vue-temp-cli
    |-- index.js
    `-- lib

2.在改文件夹下新建一个index.js 文件,内容如下

console.log('vue-temp-cli')

3.执行该node脚本

PS F:\blog\node-cli\vue-temp-cli> node .\index.js
vue-temp-cli
PS F:\blog\node-cli\vue-temp-cli> 

完成上面的步骤，只是编写了简单的node脚本，这时的 vue-temp-cli 脚本并不能像vue-cli，webpack直接在终端中使用，只能使用 node ./index.js 来执行。 那怎样才能使 vue-temp-cli 脚本能像vue-cli在终端使用呢？下面开始制作。

2.脚本制作cli命令行

1.新建一个package.json 文件

PS F:\blog\node-cli\vue-temp-cli> npm init -y

2.添加package.json的bin字段

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

“bin”:{
“脚手架的名称”:“脚手架执行的入口文件”
}

3.index.js文件顶部声明执行环境：

#!/usr/bin/env node
console.log('vue-temp-cli')

添加 #!/usr/bin/env node 或者 #!/usr/bin/node ，这是告诉系统，下面这个脚本，使用nodejs来执行。

#!/usr/bin/env node 的意思是让系统自己去找node的执行程序。

#!/usr/bin/node 的意思是，明确告诉系统，node的执行程序在路径为 /usr/bin/node 。

4.执行 npm link

PS F:\blog\node-cli\vue-temp-cli> npm link
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN vue-temp-cli@1.0.0 No description
npm WARN vue-temp-cli@1.0.0 No repository field.

up to date in 0.445s
# 生成的vue-temp-cli可执行文件存到 C:\Users\liujun\AppData\Roaming\npm 目录下
C:\Users\liujun\AppData\Roaming\npm\vue-temp-cli -> C:\Users\liujun\AppData\Roaming\npm\node_modules\vue-temp-cli\index.js
C:\Users\liujun\AppData\Roaming\npm\node_modules\vue-temp-cli -> F:\blog\node-cli\vue-temp-cli
PS F:\blog\node-cli\vue-temp-cli>  

在当前package.json目录下，打开命令行工具，执行 npm link ，将当前的代码在npm全局目录下留个快捷方式。相当于全局安装了vue-temp-cli这个脚手架了

5.在终端执行 vue-teml-cli 命令，执行index.js中的脚本

PS F:\blog\node-cli\vue-temp-cli> vue-temp-cli
vue-temp-cli

这些一个简单的node cli命令行工具编写完成，但是现在还不能执行 vue-temp-cli -v , vue-temp-cli create 等指令，下面开始编写命令行工具的指令。

3.编写查看版本-v指令

1.安装 commander 库

Commander.js node.js 命令行界面的完整解决方案

PS F:\blog\node-cli\vue-temp-cli> npm install commander
npm WARN vue-temp-cli@1.0.0 No description
npm WARN vue-temp-cli@1.0.0 No repository field.

+ commander@5.1.0
added 1 package from 1 contributor in 0.699s

2.编写index.js 文件

#!/usr/bin/env node
console.log('vue-temp-cli')
var program = require('commander');
program.version(require('./package.json').version)
program.parse(process.argv);

3.保存上面代码后执行 vue-temp-cli -V 命令 （ 不需要 npm link ）

PS F:\blog\node-cli\vue-temp-cli> vue-temp-cli -V
vue-temp-cli
1.0.0
PS F:\blog\node-cli\vue-temp-cli> 

控制台成功的打印了 vue-temp-cli 的版本号，当执行 vue-temp-cli -v 时，发现并没有效果。那如果希望程序响应-v选项而不是-V选项，那怎么办呢？看下面代码

4.添加 -v --version 指令 替换 -V

#!/usr/bin/env node
console.log('vue-temp-cli')
var program = require('commander');
# 注意字符串语法：'-v, --version'，分为长短标识，中间用逗号、竖线或者空格分割。只能有长短标识
program.version(require('./package.json').version,  '-v, --version')
program.parse(process.argv);

5.执行 vue-temp-cli -v 等命令

PS F:\blog\node-cli\vue-temp-cli> vue-temp-cli -v       
vue-temp-cli
1.0.0
PS F:\blog\node-cli\vue-temp-cli> vue-temp-cli --version
vue-temp-cli
1.0.0
PS F:\blog\node-cli\vue-temp-cli> vue-temp-cli -V       
vue-temp-cli
error: unknown option '-V'
PS F:\blog\node-cli\vue-temp-cli> 

4.编写-h指令的提示信息

1.执行 vue-temp-cli -h 命令

下面是默认的提示信息

PS F:\blog\node-cli\vue-temp-cli> vue-temp-cli -h
vue-temp-cli
Usage: index [options]

Options:
  -v, --version  output the version number
  -h, --help     display help for command
PS F:\blog\node-cli\vue-temp-cli>

2.添加一个 options 选项 （可供后面定义的指令使用该选项，获取选项的属性 program.xxx ）

#!/usr/bin/env node
console.log('vue-temp-cli')
var program = require('commander');
program.version(require('./package.json').version,  '-v, --version')

program.option('-i, --integer <n>', 'An integer argument')

program.parse(process.argv);

3.执行 vue-temp-cli -h 命令

PS F:\blog\node-cli\vue-temp-cli> vue-temp-cli -h  
vue-temp-cli
Usage: index [options]

Options:
  -v, --version      output the version number
  -i, --integer <n>  An integer argument
  -h, --help         display help for command
PS F:\blog\node-cli\vue-temp-cli>

4.添加 other 提示

#!/usr/bin/env node
console.log('vue-temp-cli')
var program = require('commander');
program.version(require('./package.json').version,  '-v, --version')

program.option('-i, --integer <n>', 'An integer argument')

program.on('--help', function(){
  console.log('')
  console.log('Other:');
  console.log('  $ vue-temp-cli --help');
  console.log('  $ vue-temp-cli -h');
  console.log('  $ vue-temp-cli -v');
  console.log('  $ vue-temp-cli --version');
  console.log('  $ vue-temp-cli -i 1');
  console.log('  $ vue-temp-cli --interger 1');
  console.log('  $ vue-temp-cli create myVue');
});
program.parse(process.argv);

5.执行 vue-temp-cli -h 命令

PS F:\blog\node-cli\vue-temp-cli> vue-temp-cli -h
vue-temp-cli
Usage: index [options]

Options:
  -v, --version      output the version number
  -i, --integer <n>  An integer argument
  -h, --help         display help for command

Other:
  $ vue-temp-cli --help
  $ vue-temp-cli -h
  $ vue-temp-cli -v
  $ vue-temp-cli --version
  $ vue-temp-cli -i 1
  $ vue-temp-cli --interger 1
  $ vue-temp-cli create myVue
PS F:\blog\node-cli\vue-temp-cli>