用commander.js構建本身的腳手架工具

隨着前端技術的發展，工程化逐漸成爲了一種趨勢。但在實際開發時，搭建項目是一件很繁瑣的事情，尤爲是在對一個框架的用法還不熟悉的時候。因而不少框架都自帶一套腳手架工具，在初始化前端項目的時候就能夠不用本身從頭搭建，只要在命令行輸入初始化命令便可。

那麼，若是想自行開發出這樣一個命令行工具來初始化自定義項目，該怎麼作呢？研究的過程當中，偶然間發現了 commander.js 這個模塊，能夠幫助命令行工具的開發。因而邊研究邊整理了這篇筆記。

1、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)

2、使用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'); })

3、構建項目demo
此demo用於初始化項目副本，所以能夠根據本身的須要構建。咱們能夠利用一些腳手架工具來初始化項目，也能夠本身一步步搭建。

將搭建的項目複製進templates目錄下（node_modules下的文件及文件夾能夠不用複製），並重命名爲demo1；而後在init-commander-tool目錄下運行 node bin\init-project --help 測試全部命令是否能正常顯示。

4、全局使用
在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 便可，項目名稱能夠本身定義。