動手製作nodejs命令列工具 iconfont-cli

摘要： 自動化開發工作流 使開發者能夠將更多的精力和時間放在業務邏輯之上，通常會使用 webpack gulp browser-sync 等CLI工具，而自動化的實現則離不開指令碼的編寫；對於前端開發工程師而言，能夠製作 nodejs 命令列指令碼工具也成為必須掌握的技能之一。 準備工作 ...

自動化開發工作流 使開發者能夠將更多的精力和時間放在業務邏輯之上，通常會使用 webpack gulp browser-sync 等CLI工具，而自動化的實現則離不開指令碼的編寫；對於前端開發工程師而言，能夠製作 nodejs 命令列指令碼工具也成為必須掌握的技能之一。

準備工作

1. 首先我們建立一個新的專案目錄 mkdir iconfont-cli ，並使用 npm init 進行初始化，一路回車即可。
2. 建立指令碼入口檔案 index.js , 並在package.json設定 bin 引數， 定義指令碼命令名稱及入口檔案，如下：

在package.json中新增命令入口檔案

{
"name":'iconfont-cli'
...
"bin": {
"iconfont": "index.js"
}
...
}
複製程式碼

建立index.js，檔案頂部宣告指令碼解釋程式並指定為nodejs

#!/usr/bin/env node

// 程式碼...
console.log('iconfont cli start');

複製程式碼

3. 執行 npm link ，將npm包連結到全域性執行環境，從而在任意位置使用命令列都可以直接執行，開發期間可以實時除錯，該命令主要做兩件事情: 一是為npm包目錄建立軟連結，將其鏈到 {prefix}/lib/node_modules/<package> ，二為可執行檔案(bin)建立軟連結，將其鏈到 {prefix}/bin/{name}
4. 控制檯輸入 iconfont , 如列印 iconfont cli start ， 那麼恭喜，此時專案初始化完成:blush:

命令互動

基本

命令列互動最核心的兩大部分: 輸入 與 輸出 。在準備工作部分，我們已經通過執行 iconfont 簡單命令成功執行指令碼並輸出log。而通常，我們在執行命令時會傳入一些引數供使用者進行配置，類似 iconfont --dest xxxx 的形式。命令攜帶的引數可以在node指令碼中通過 process.argv 進行訪問，然後解析出引數內容。所幸，目前有很多nodejs外掛提供了控制檯命令引數的解析，比較流行的是 ofollow,noindex"> commander.js 庫, 可以使我們方便快捷的實現 引數的解析及幫助文件的輸出

npm install commander --save

#!/usr/bin/env node
var program = require('commander');

program
.version('0.0.1') // 設定版本號
.option('-d, --dest <path>', '設定目標資料夾')// 設定dest引數
.action(function (cmd) {
console.log(cmd.dest) // 列印使用者輸入的dest引數
// ...執行後續的功能
})

program.parse(process.argv); // 解析命令列引數
複製程式碼

執行 iconfont -d ./ ，控制檯輸出 ./

3. commander預設提供了幫助命令，可以直接通過執行 iconfont --help 或者 iconfont -h 輸出

進階

有時候我們希望通過問答的形式使使用者進行一些選擇、輸入或確認操作，以便可以傳達和接收更多的資訊

對於這種需求，我們可以藉助 Inquirer.js

庫進行實現，例如我們在上文的commander中配置了dest資料夾後，希望使用者進行二次確認操作，因此我們可以有如下做法：

// 此處略去....
var inquirer = require('inquirer');

program
.version('0.0.1') // 設定版本號
.option('-d, --dest <path>', '設定目標資料夾')// 設定dest引數
.action(function (cmd) {
console.log(cmd.dest) // 列印使用者輸入的dest引數
inquirer.prompt([
{
type:'confirm',
name:'destOk',
message:'確認使用目標資料夾:' + cmd.dest
}
]).then(function(answers){
console.log(answers.destOk) // true或false
// ...執行後續的功能
})
})

// 此處略去...
複製程式碼

執行 iconfont -d ./ ，效果如下:

整合 webfonts-generator

webfonts-generator 支援通過svg檔案製作出css字型圖示

npm install webfonts-generator --save

#!/usr/bin/env node
var program= require('commander');
var inquirer= require('inquirer');
var webfontsGenerator = require('webfonts-generator');
var path= require('path');
var fs= require('fs');

// 遍歷查詢SVG檔案
function findSvgs(folder, list){
list = list || [];
try {
var files = fs.readdirSync(folder);
for(var i=0; i<files.length; i++){
(function(){
var fileName = files[i],
filePath = path.join(folder, fileName),
stats= fs.statSync(filePath);
if(!stats.isFile()){
return findSvgs(filePath, list);
} else if(path.extname(filePath) === '.svg'){
list.push(filePath);
}
})(i);
}
} catch (error) {
console.error(error);
}
return list;
}

program
.version('0.0.1') // 設定版本號
.option('-d, --dest <path>', '設定目標資料夾')// 設定dest引數
.action(function (cmd) {

var currentFolder = process.cwd(); // 當前命令執行的目錄
var destFolder= path.isAbsolute(cmd.dest) ? cmd.dest : path.join(currentFolder,cmd.dest); // 目標目錄, 需區分是否為絕對路徑

inquirer.prompt([
{
type: 'confirm',
name: 'destOk',
message: '確認使用目標資料夾:' + destFolder
}
]).then(function(answers){

// 使用者確認後執行後續的功能
if(answers.destOk){

webfontsGenerator({
files: findSvgs(currentFolder),
dest: cmd.dest,
html: true
}, function(error) {
if (error) {
console.log('Fail!', error);
} else {
console.log('Done!');
}
})

}

})
})

program.parse(process.argv);
複製程式碼

3. 進入svg檔案所在的資料夾，執行命令 iconfont -d ./iconfont ，即可生成圖示相關的各類檔案以及html預覽

釋出與使用

至此我們成功完成了一個簡單的命令列工具 iconfont-cli ，接下來我們可以將其釋出的npm倉庫供其他開發者下載使用，具體步驟如下：

1. 首先我們需要在www.npmjs.com/註冊賬戶，之後使用 npm adduser 進行登入，需填寫Username、Password、Email相關資訊.
2. 檢查package.json設定，如author、license、version、homepage等相關資訊，參考package.json屬性詳解
3. 釋出 npm publish ，此時我們可能會遇到下面截圖的問題，說明iconfont-cli已經被其他人釋出過了，所以要換個名字進行釋出，直接修改package.json中的name即可.

4. 成功釋出之後，可以通過 npm install -g iconfont-cli

全域性安裝使用