用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. 新建目录如下：
init-commander-tool |-bin |-init-project.js |-lib |-install.js |-templates
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 即可，项目名称可以自己定义。
喜欢这篇文章？欢迎打赏~~
