參考文檔：https://www.jb51.net/article/159892.htm

1. 首先需要一個npm的賬號，這里不建議用個人賬號，注冊一個團(tuán)隊(duì)賬號

腳手架取名 much-cli：寓意許多腳手架，希望前端和后端都能采用這個腳手架進(jìn)行架構(gòu)，實(shí)現(xiàn)單點(diǎn)維護(hù)，多點(diǎn)使用，同步升級等需求。

2. 創(chuàng)建一個目錄 much-cli 在里面用npm進(jìn)行初始化

npm init

如果不知道如何設(shè)定直接敲回車

這里需要點(diǎn)前置知識，寫好腳手架會有一些必要的依賴需要了解

• commander

這是用來編寫指令和處理命令行的，具體用法參考如下

const program = require("commander");
// 定義指令
program
 .version('0.0.1')
 .command('init', 'Generate a new project from a template')
 .action(() => {
   // 回調(diào)函數(shù)
 })
// 解析命令行參數(shù)
program.parse(process.argv);

• inquirer

這是個強(qiáng)大的交互式命令行工具，具體用法參考如下

const inquirer = require('inquirer');
inquirer
 .prompt([
   // 一些交互式的問題
 ])
 .then(answers => {
   // 回調(diào)函數(shù)，answers 就是用戶輸入的內(nèi)容，是個對象
 });

想象一下我們用 vue init webpack project-name 之后是不是會有幾個交互問題，問你文件名啊、作者啊、描述啊、要不要用 eslint 啊等等之類的，就是用這個來寫的。

• chalk

這是用來修改控制臺輸出內(nèi)容樣式的，比如顏色啊，具體用法如下：

const chalk = require('chalk');
console.log(chalk.green('success'));
console.log(chalk.red('error'));

• ora

這是一個好看的加載，就是你下載的時候會有個轉(zhuǎn)圈圈的那種效果，用法如下：

const ora = require('ora')
let spinner = ora('downloading template ...')
spinner.start()

• download-git-repo

看名字很明顯了，這是用來下載遠(yuǎn)程模板的，支持 GitHub、 GitLab 和 Bitbucket 等，用法如下：

const download = require('download-git-repo')
download(repository, destination, options, callback)

其中 repository 是遠(yuǎn)程倉庫地址；destination 是存放下載的文件路徑，也可以直接寫文件名，默認(rèn)就是當(dāng)前目錄；options 是一些選項(xiàng)，比如 { clone：boolean } 表示用 http download 還是 git clone 的形式下載。

3. 安裝依賴

有了以上知識之后就能先安裝一些依賴

npm install commander inquirer chalk ora download-git-repo

會自動安裝node依賴，并自動把版本寫入package.json里面

4. 開始編寫腳手架

新建一個 bin 文件夾，并在 bin 目錄下新建一個無后綴名的 much 文件，并寫上：

//much文件
#!/usr/bin/env node
console.log('hello much');

這個文件就是我們整個腳手架的入口文件，我們用 node ./bin/xr 運(yùn)行一下，就能在控制臺打印出 hello much

% node ./bin/much 
hello much

4.1 bin文件夾初始化

目前文件夾內(nèi)只有一個入口文件 much ，我們來編寫它，讓它實(shí)現(xiàn)簡單的命令功能

#!/usr/bin/env node

// console.log('hello much')
const Program = require('commander');
const _package = require('../package.json')

// 定義名字
// 定義版本
// 定義用法
// 定義幾個命令
Program
  .name(_package.name)
  .version(_package.version)
  .usage('<command> [options]')
  .command('add', '添加一個新模板')
  .command('delete', '刪除一個新模板')
  .command('list', '列出所有模板')
  .command('init', '從模板初始化一個新項(xiàng)目')

// 解析命令行參數(shù)
Program.parse(process.argv)

這個文件的作用就是用來定義指令，現(xiàn)在我們用 node ./bin/much 來看下效果

% node ./bin/much
Usage: much-cli <command> [options]

Options:
  -V, --version   output the version number
  -h, --help      display help for command

Commands:
  add             添加一個新模板
  delete          刪除一個新模板
  list            列出所有模板
  init            從模板初始化一個新項(xiàng)目
  help [command]  display help for command

當(dāng)然如果覺得 node ./bin/much 這個命令太麻煩的話，可以在package.json中添加以下內(nèi)容

// bin 用來指定每個命令所對應(yīng)的可執(zhí)行文件的位置
"bin": {
  "much-cli": "/bin/much"
}