commander腳手架工具使用詳解

2022-09-14 22:05:19

概述

在當前我們前端專案中，大多數情況下，都是使用對應框架開發的腳手架進行專案工程化的搭建，既然要用到腳手架，那麼肯定會用到命令，比如vue-cli的建立命令：vue create projectName,要想解析控制檯輸出的自定義命令，離不開commander這個工具。

commander負責將引數解析為選項和命令引數。記錄一期這個工具的基本使用。

下載

npm install commander

預備工作

第一步：首先需要控制檯能解析識別我們自定的命令，像vue-cli，他的命令是vue,我們這裡假設自定義gnip，因此，需要給js檔案加上這句話

#!/usr/bin/env node   
//下面正常的node程式碼，比如我們需要設定的命令
console.log('自定義命令執行了")

第二步：在package.json檔案中，新加bin設定項

{
  "name": "gnip-cli",
  "version": "1.0.4",
  "description": "gnip-cli",
  "main": "index.js",
  //這裡將我們全域性需要執行的命令放到這裡，當我們npm下載時候，會自動加到環境變數中（然後你就可以通過 gnip xxx使用你的命令了）
  "bin": {
    "gnip": "./index.js"
  },
  "scripts": {},
  "keywords": [
    "cli"
  ],
  "author": "gnip",
  "license": "ISC",
  "devDependencies": {
    "commander": "^9.4.0",
    "download-git-repo": "^3.0.2"
  },
  "dependencies": {
    "ejs": "^3.1.8",
    "inquirer": "^7.3.3"
  },
  "files": [
    "node_modules",
    "lib",
    "*"
  ]
}

第三步：執行npm link,將當前專案對映到全域性，在其他目錄下我們就可以使用gnip這個全域性命令了

核心重要的選項

option

這個方法可以使我們執行類似於gnip -g haha 等的帶引數的命令時，可以解析注意點：

一個-是簡寫，--的是全稱
這種尖角括號代表必填引數（後面不跟引數會提示少引數）

//index.js
const program = require("commander");
  program
  //-g表示引數，比如:gnip -g,第二個引數為當前選項描述後面可以不接引數
    .option("-g", "a gnip cli")
    //-d是簡寫，--dest 是全稱，<dest>標書引數名，必填，因此你的命令可以是 gnip -d 哈哈或者gnip --dest 哈哈
    .option("-d, --dest <dest>", "a destion folder,例如：-d /src/components")
    //同上
    .option("-f, --framework <framework>", "your framework,such as vue react")
    //鏈式呼叫解析引數
    .parse();
  // 監聽option物件的變化,做出迴應
  const options = program.opts();//獲取設定引數物件
  if (options.g) {
    console.log("a gnip cli");
  } else if (options.dest) {
    console.log("a destion folder,例如：-d /src/components");
  } else if (options.framework) {
    console.log("your framework,such as vue react");
  }

command

用來註冊命令和對應的回撥邏輯，比如我想執行和vue cli一樣的create命令，可以這樣gnip create projectName

    const program = require("commander");
       // 建立工程專案，例如：gnip create demon01
    program
        .command("create <projectName>")
        .description("clone a repository from remote")
        .action(()=>{
        //當用戶通過 gnip create demon01回車的時候就會執行這個回撥，這裡你可以讀寫檔案，下載專案模板，克隆遠端倉庫，下載包等等
        })

總結

其實上面兩個方法就足夠我們自己寫一個自動化指令碼命令了，甚至是一個自定義的腳手架，腳手架搭建還可以配合其他的工具，後面再介紹，更多commander的用法，可以看檔案，內容很多，我這裡只記錄了常用的，後面陸續更新inquirer，ejs，download-git-repo的搭配使用，更多關於commander腳手架工具的資料請關注it145.com其它相關文章！

commander腳手架工具使用詳解

目錄

概述

下載

預備工作

核心重要的選項

option

command

總結

熱門文章