用commander.js构建自己的脚手架工具

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

随着前端技术的发展，工程化逐渐成为了一种趋势。但在实际开发时，搭建项目是一件很繁琐的事情，尤其是在对一个框架的用法还不熟悉的时候。于是很多框架都自带一套脚手架工具，在初始化前端项目的时候就可以不用自己从头搭建，只要在命令行输入初始化命令即可。

那么，如果想自行开发出这样一个命令行工具来初始化自定义项目，该怎么做呢？研究的过程中，偶然间发现了 commander.js 这个模块，可以帮助命令行工具的开发。于是边研究边整理了这篇笔记。

一、commander.js的基本用法
1. 安装

mkdir commander-example && cd commander-example
npm install commander --save

2. 使用

新建一个bin目录，然后在该目录下新建一个test.js文件，文件内容：

// 引入依赖
var program = require('commander');// 定义版本和参数选项
program
.version('0.1.0', '-v, --version')
.option('-i, --init', 'init something')
.option('-g, --generate', 'generate something')
.option('-r, --remove', 'remove something');// 必须在.parse()之前，因为node的emit()是即时的
program.on('--help', function(){
console.log(' Examples:');
console.log('');
console.log(' this is an example');
console.log('');
});program.parse(process.argv);if(program.init) {
console.log('init something')
}if(program.generate) {
console.log('generate something')
}if(program.remove) {
console.log('remove something')
}

然后在命令行里输入测试：

node bin\test --help

得到如下结果：

Usage: test [options] Options: -v, --version output the version number
-i, --init init something
-g, --generate generate something
-r, --remove remove something
-h, --help output usage information
Examples:

3. API解析

· version

作用：定义命令程序的版本号
用法示例：.version('0.0.1', '-v, --version')
参数解析：
① 版本号<必须>

② 自定义标志<可省略>：默认为 -V 和 --version

· option

作用：用于定义命令选项
用法示例：.option('-n, --name<path>', 'name description', 'default name')
参数解析：
① 自定义标志<必须>：分为长短标识，中间用逗号、竖线或者空格分割；标志后面可跟必须参数或可选参数，前者用 <> 包含，后者用 [] 包含
② 选项描述<省略不报错>：在使用 --help 命令时显示标志描述

③ 默认值<可省略>

· command

作用：添加命令名称
用法示例：.command('rmdir <dir> [otherDirs...]', 'install description', opts)
参数解析：
① 命令名称<必须>：命令后面可跟用 <> 或 [] 包含的参数；命令的最后一个参数可以是可变的，像实例中那样在数组后面加入 ... 标志；在命令后面传入的参数会被传入到 action 的回调函数以及 program.args 数组中
② 命令描述<可省略>：如果存在，且没有显示调用action(fn)，就会启动子命令程序，否则会报错

③ 配置选项<可省略>：可配置noHelp、isDefault等

· description

作用：定义命令的描述

用法示例：.description('rmdir desc')

· action

作用：定义命令的回调函数

用法示例：.action(fn)

· parse

作用：用于解析process.argv，设置options以及触发commands
用法示例：.parse(process.argv)

二、使用commander.js开发本地模块init-commander-tool
1. 新建目录如下：

2. 运行 npm init 来初始化项目，项目名称设置为init-commander-tool，并安装依赖包：

```"devDependencies": {
"chalk": "^2.4.1",
"commander": "^2.15.1",
"fs-extra": "^6.0.1",
"path": "^0.12.7",
"through2": "^2.0.3",
"vinyl-fs": "^3.0.3",
"which": "^1.3.1"
}```

npm init
npm install

3. init-porject.js中代码如下

// 指定脚本的执行程序
#! /usr/bin/env node// 引入依赖
var program = require('commander');
var vfs = require('vinyl-fs');
var through = require('through2');
const chalk = require('chalk');
const fs = require('fs-extra');
const path = require('path');// 定义版本号以及命令选项
program
.version('1.0.0')
.option('-i --init [name]', 'init a project', 'myFirstProject')program.parse(process.argv);if(program.init) {
// 获取将要构建的项目根目录
var projectPath = path.resolve(program.init);
// 获取将要构建的的项目名称
var projectName = path.basename(projectPath); console.log(`Start to init a project in ${chalk.green(projectPath)}`); // 根据将要构建的项目名称创建文件夹
fs.ensureDirSync(projectName); // 获取本地模块下的demo1目录
var cwd = path.join(__dirname, '../templates/demo1'); // 从demo1目录中读取除node_modules目录下的所有文件并筛选处理
vfs.src(['**/*', '!node_modules/**/*'], {cwd: cwd, dot: true})
.pipe(through.obj(function(file, enc, callback){
if(!file.stat.isFile()) {
return callback();
} this.push(file);
return callback();
}))
// 将从demo1目录下读取的文件流写入到之前创建的文件夹中
.pipe(vfs.dest(projectPath))
.on('end', function() {
console.log('Installing packages...') // 将node工作目录更改成构建的项目根目录下
process.chdir(projectPath); // 执行安装命令
require('../lib/install');
})
.resume();
}

· #! /usr/bin/env node

指定脚本的执行程序，这里是node。也可以用!/usr/bin/node，但如果用户将node安装在非默认路径下，会找不到node。所以最好选择用env（包含环境变量）来查找node安装目录。

· vinyl-fs：

Vinyl用于描述文件的元数据对象；该模块主要暴露了两个方法src和dest，它们各自返回数据流；不同的是前者提供Vinyl对象，后者使用Vinyl对象；简单的说就是一个读取文件，另一个往磁盘写文件

param@src：src(globs[, options])

第一个参数为字符串或字符串数组，表明文件位置。如果是数组，则会按照从前到后的顺序来执行，但带有!（非）符号的路径应该放在后面。第二个参数为选项对象，查看具体配置

param@dest：dest(folder[, options])

第一个参数为文件夹路径或函数，如果是后者，则它会被用于处理每一个Vinyl文件对象，且该函数必须返回一个文件夹路径。第二个参数为选项对象，查看具体配置。该方法返回文件对象流，并将他们写入磁盘以及传递到管道下游，所以你可以继续在管道中进行操作。如果文件拥有symlink属性，就会创建一个符号链接。

· through2：

through2主要是对node中streams.Transform的简单封装，让其使用起来更加简单。具体用法可查看through2**

4. install.js中代码如下：

// 引入依赖
var which = require('which');
const chalk = require('chalk');var childProcess = require('child_process');// 开启子进程来执行npm install命令
function runCmd(cmd, args, fn) {
args = args || [];
var runner = childProcess.spawn(cmd, args, {
stdio: 'inherit'
}); runner.on('close', function(code) {
if(fn) {
fn(code);
}
})
}// 查找系统中用于安装依赖包的命令
function findNpm() {
var npms = ['tnpm', 'cnpm', 'npm'];
for(var i = 0; i < npms.length; i++) {
try {
// 查找环境变量下指定的可执行文件的第一个实例
which.sync(npms[i]);
console.log('use npm: ' + npms[i]);
return npms[i]
}catch(e) {
}
}
throw new Error(chalk.red('please install npm'));
}var npm = findNpm();
runCmd(which.sync(npm), ['install'], function() {
console.log(npm + ' install end');
})

三、构建项目demo
此demo用于初始化项目副本，因此可以根据自己的需要构建。我们可以利用一些脚手架工具来初始化项目，也可以自己一步步搭建。

将搭建的项目复制进templates目录下（node_modules下的文件及文件夹可以不用复制），并重命名为demo1；然后在init-commander-tool目录下运行 node bin\init-project --help 测试所有命令是否能正常显示。

四、全局使用
在package.json里面添加bin字段：

// bin项用来指定各个内部命令对应的可执行文件的位置
"bin": {
"initP": "./bin/init-project"
},

然后在init-commander-tool目录下运行 npm link，将本地模块链接到全局环境下，这样就可以在任何地方使用initP命令了。
在命令行中键入：initP --help，出现以下内容则代表可以正常使用。

Usage: init-project [options] Options: -V, --version output the version number
-i --init [name] init a project (default: myFirstProject)
-h, --help output usage information

最后在需要初始化项目的地方运行 initP --init myProject 即可，项目名称可以自己定义。