準備工作

起步

• 新建一個目錄，作為命令列工具原始碼目錄。

mkdir webflow-cli

• 初始化 package.json 檔案

npm init --yes

• 進入命令列工具原始碼目錄（webflow-cli），並且新建 bin 資料夾，並建立主程式，wflow.js

cd webflow-cli

mkdir bin

touch wflow.js

• wflow.js 中寫入測試程式

#!/usr/bin/env node

console.log('wflow is run')

• 在根目錄下的 package.json 檔案中新增 bin 欄位,並增加相關命令

{
  "bin":{
    "wflow":"bin/wflow.js"
  }
}

• 安裝到全域性

npm install . -g

• 測試命令可行性

在命令列中輸入：（哪個檔案路徑下無所謂）

wflow

列印顯示 wflow is run 則表示，測試通過。

• 建立連結，修改原始碼時，wflow 命令執行的效果為最新原始碼執行效果。

在 webflow-cli 根目錄下，執行：

npm link

現在可以修改 webflow-cli/bin 資料夾下的 wflow.js ，再執行 wflow 檢測是否已經 link 成功了。

以上，就完成了命令列的基本邏輯。

進階

安裝依賴

npm install commander inquirer --save

• commander : 讓開發 Nodejs 命令列更加簡單（node.js command-line interfaces made easy）
• inquirer : 常見的互動式命令列使用者介面的集合。

使用

• commander 管理可以使用的命令

const program = require('commander')

program.version('1.0.0')
  .usage('<command> [專案名稱]')
  .command('init'
 
, '初始化專案')
  .command('g', '自動生成專案檔案')
  .parse(process.argv);

1. usage ：命令列工具的用法說明
2. command：可新增多個，每一個是一個命令，對應著 `bin` 目錄下的一個檔案。比如以上的對應 bin 目錄下的 wflow-init.js 和 wflow-g.js；
3. parse：將引數格式化

• inquirer 的基本使用

  • 互動型之-選擇

    inquirer.prompt([
        {
          type: 'list',
          name: 'templateType',
          message: '請選擇模板',
          choices: Object.keys(downloadUrls).map(item => {
            return { name: item }
          })
        }
      ])

  • 互動型之-回答

    inquirer.prompt([
      {
        name: 'name',
        message: '請輸入專案名稱',
        default: projectName
      },
      {
        name: 'version',
        message: '請輸入專案版本',
        default: '1.0.0'
      },
      {
        name: 'description',
        message: '請輸入專案描述',
        default: projectName
      },
    ])

• Nodejs 執行系統命令

const exec = require('child_process').exec;

exec('echo 1',(err,stdout,stderr)=>{
    // console.log('執行錯誤',err);
    console.log('標準輸出流',stdout);
    // console.log('錯誤輸出',stderr);
})

演示程式碼