快捷導(dǎo)航

commander腳手架工具使用詳解

更新時(shí)間：2022年09月13日 10:03:57 作者：gnip

這篇文章主要為大家介紹了commander腳手架工具使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

概述

在當(dāng)前我們前端項(xiàng)目中，大多數(shù)情況下，都是使用對應(yīng)框架開發(fā)的腳手架進(jìn)行項(xiàng)目工程化的搭建，既然要用到腳手架，那么肯定會(huì)用到命令，比如vue-cli的創(chuàng)建命令：vue create projectName,要想解析控制臺(tái)輸出的自定義命令，離不開commander這個(gè)工具。

commander負(fù)責(zé)將參數(shù)解析為選項(xiàng)和命令參數(shù)。記錄一期這個(gè)工具的基本使用。

下載

npm install commander

預(yù)備工作

第一步：首先需要控制臺(tái)能解析識(shí)別我們自定的命令，像vue-cli，他的命令是vue,我們這里假設(shè)自定義gnip，因此，需要給js文件加上這句話

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

第二步：在package.json文件中，新加bin配置項(xiàng)

{
  "name": "gnip-cli",
  "version": "1.0.4",
  "description": "gnip-cli",
  "main": "index.js",
  //這里將我們?nèi)中枰獔?zhí)行的命令放到這里，當(dāng)我們npm下載時(shí)候，會(huì)自動(dòng)加到環(huán)境變量中（然后你就可以通過 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",
    "*"
  ]
}

第三步：執(zhí)行npm link,將當(dāng)前項(xiàng)目映射到全局，在其他目錄下我們就可以使用gnip這個(gè)全局命令了

核心重要的選項(xiàng)

option

這個(gè)方法可以使我們執(zhí)行類似于gnip -g haha 等的帶參數(shù)的命令時(shí)，可以解析注意點(diǎn)：

一個(gè)-是簡寫，--的是全稱
這種尖角括號代表必填參數(shù)（后面不跟參數(shù)會(huì)提示少參數(shù)）

//index.js
const program = require("commander");
  program
  //-g表示參數(shù)，比如:gnip -g,第二個(gè)參數(shù)為當(dāng)前選項(xiàng)描述后面可以不接參數(shù)
    .option("-g", "a gnip cli")
    //-d是簡寫，--dest 是全稱，<dest>標(biāo)書參數(shù)名，必填，因此你的命令可以是 gnip -d 哈哈或者gnip --dest 哈哈
    .option("-d, --dest <dest>", "a destion folder,例如：-d /src/components")
    //同上
    .option("-f, --framework <framework>", "your framework,such as vue react")
    //鏈?zhǔn)秸{(diào)用解析參數(shù)
    .parse();
  // 監(jiān)聽option對象的變化,做出回應(yīng)
  const options = program.opts();//獲取配置參數(shù)對象
  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

用來注冊命令和對應(yīng)的回調(diào)邏輯，比如我想執(zhí)行和vue cli一樣的create命令，可以這樣gnip create projectName

    const program = require("commander");
       // 創(chuàng)建工程項(xiàng)目，例如：gnip create demon01
    program
        .command("create <projectName>")
        .description("clone a repository from remote")
        .action(()=>{
        //當(dāng)用戶通過 gnip create demon01回車的時(shí)候就會(huì)執(zhí)行這個(gè)回調(diào)，這里你可以讀寫文件，下載項(xiàng)目模板，克隆遠(yuǎn)程倉庫，下載包等等
        })

總結(jié)

其實(shí)上面兩個(gè)方法就足夠我們自己寫一個(gè)自動(dòng)化腳本命令了，甚至是一個(gè)自定義的腳手架，腳手架搭建還可以配合其他的工具，后面再介紹，更多commander的用法，可以看文檔，內(nèi)容很多，我這里只記錄了常用的，后面陸續(xù)更新inquirer，ejs，download-git-repo的搭配使用，更多關(guān)于commander腳手架工具的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: