摘要：以下閱讀將花費(fèi)分鐘前言日常開發(fā)中，我們都只專注在業(yè)務(wù)上的開發(fā)，拿起一套開箱即用的模板項(xiàng)目就直接開搞了，不知道大家有沒有思考過，平時(shí)我們使用的腳手架里面到底做了什么，并且如果是自己來搭一套腳手架，應(yīng)該怎么去搭呢在本博客中，將記錄作者搭建腳手架

（以下閱讀將花費(fèi)10分鐘）

日常開發(fā)中，我們都只專注在業(yè)務(wù)上的開發(fā)，拿起一套開箱即用的模板項(xiàng)目就直接開搞了，不知道大家有沒有思考過，平時(shí)我們使用的腳手架里面到底做了什么，并且如果是自己來搭一套腳手架，應(yīng)該怎么去搭呢？

在本博客中，將記錄作者搭建腳手架的過程，整體將分為兩個(gè)部分，第一部分是cli的搭建，第二部分是模板項(xiàng)目的搭建；

在搭建腳手架cli之前，我們首先思考一下，一個(gè)cli，需要什么能力呢？答案是初始化能力，那么初始化的功能需要怎樣去實(shí)現(xiàn)呢，這里，我們先梳理一下思路。

我們?cè)谑褂闷渌鹀li時(shí)，會(huì)發(fā)現(xiàn)，它們有問詢的功能，比如詢問項(xiàng)目名稱，項(xiàng)目描述等；然后還可以選擇模板項(xiàng)目將要使用什么css預(yù)處理器等的問題；所以，cli首先就要具備問詢功能，用以獲取定制化信息；
問詢結(jié)束后，我們的cli會(huì)獲得即將創(chuàng)建的項(xiàng)目的基本信息，接下來我們就需要以一個(gè)模板項(xiàng)目作為模板去創(chuàng)建，模板項(xiàng)目將會(huì)在第二部分講解，這里一筆帶過~；OK，既然有了模板項(xiàng)目，cli就需要下載這個(gè)項(xiàng)目，然后復(fù)制這個(gè)項(xiàng)目，同時(shí)將前面問詢所得的定制化信息寫入項(xiàng)目配置中，所以cli還需要有下載和復(fù)制，寫入模板功能；
到此，一個(gè)模板項(xiàng)目基本已經(jīng)創(chuàng)建成功了，那后面我們還希望腳手架可以幫忙進(jìn)行g(shù)it初始化以及安裝依賴的功能，所以最終，還需要添加git初始化和安裝依賴的功能；
總結(jié)一下，實(shí)現(xiàn)一個(gè)cli的初始化功能我們需要有如下能力：
問詢 ==> 下載模板 ==> 復(fù)制，寫入模板 ==> git初始化 ==> 安裝依賴

好了，為了實(shí)現(xiàn)上述思路，cli將會(huì)引入如下依賴去實(shí)現(xiàn)對(duì)應(yīng)的功能：

const program = require("commander");  // commander負(fù)責(zé)讀取命令
const inquirer = require("inquirer");   // inquirer負(fù)責(zé)問詢
const download = require("download-git-repo");   // download-git-repo負(fù)責(zé)下載對(duì)應(yīng)模板項(xiàng)目的git倉庫
const fse = require("fs-extra");   // fs-extra負(fù)責(zé)文件的復(fù)制
const memFs = require("mem-fs");
const editor = require("mem-fs-editor");   // mem-fs-editor負(fù)責(zé)模板的復(fù)制以及嵌入模板字符串，它需要依賴mem-fs
const { exec } = require("child_process");   // child_process負(fù)責(zé)執(zhí)行命令行

當(dāng)然除了上述必須的依賴外，為了更好的交互體驗(yàn)，還引入了如下依賴：

const chalk = require("chalk");   // 改變命令行輸出樣式
const ora = require("ora");   // 一個(gè)優(yōu)雅地命令行交互spinner

至此，準(zhǔn)備的工作已經(jīng)完畢，下面，就開始一步步來編寫cli了

萬事開頭難，有了思路后，實(shí)現(xiàn)思路才是真正的開始，下面將介紹如何組織cli項(xiàng)目

首先看一下，工程的組織

├── bin                   
|   ├── begin
|   ├── begin-init 
├── src                   
|   ├── constants.js     
|   ├── project.js         
|   └── utils.js              
├── .gitignore                   
├── .npmrc
├── README.md
└── package.json

在bin/begin中引入commander，并且聲明init命令，commander會(huì)在同級(jí)目錄中尋找begin-init文件

const program = require("commander");

program
  .usage(" [options]")
  .command("init [name]", "init a project")
  .parse(process.argv);

有了第一步的解析后，我們可以在begin-init文件中編寫創(chuàng)建邏輯，這里，我們?cè)俪橄髉roject文件到src目錄底下，以便更好地分離職責(zé)，bin文件只負(fù)責(zé)解析命令就好啦~
下面就看看project文件中，如何實(shí)現(xiàn)問詢

inquirer.prompt([{
      type: "input",
      name: "projectName",
      message: "請(qǐng)輸入項(xiàng)目名：",
      validate(input) {
        if (!input) {
          return "項(xiàng)目名不能為空";
        }
        if (fse.existsSync(input)) {
          return "當(dāng)前目錄已存在同名項(xiàng)目，請(qǐng)更換項(xiàng)目名";
        }
        return true;
      }
    }]);

inquirer提供prompt函數(shù)來實(shí)現(xiàn)問詢，其參數(shù)為數(shù)組，問詢順序?qū)凑諗?shù)組的順序來進(jìn)行；

在問詢結(jié)束后，我們基本知道需要?jiǎng)?chuàng)建的項(xiàng)目的名稱、描述等信息了，下一步，就是下載倉庫了，下面我們來看看核心代碼：

const downloadPath = path.join(projectPath, "__download__");
download(TEMPLATE_GIT_REPO, downloadPath, { clone: true }, (err) => {
  // 拷貝
  // 此處省略若干代碼
  // 拷貝完成后刪除臨時(shí)文件
  fse.remove(downloadPath);
}

這里需要注意的是，模板工程所在的倉庫，即TEMPLATE_GIT_REPO，最好是public的

下載倉庫只是把模板工程存放在一個(gè)臨時(shí)文件夾內(nèi)，真正的工程文件需要等信息寫入模板后再生成；
這里需要注意的是，模板寫入時(shí)遵循ejs規(guī)范

const memFs = require("mem-fs");
const editor = require("mem-fs-editor");

// 這里需要mem-fs進(jìn)行內(nèi)存優(yōu)化
const store = memFs.create();
this.memFsEditor = editor.create(store);

// 這里source表示源文件，dest表示目標(biāo)文件，data表示需要寫入的數(shù)據(jù)
this.memFsEditor.copyTpl(
  source,
  dest,
  data
);

在調(diào)用copyTpl時(shí)，data字段中的key-value將被寫入到模板中，舉個(gè)栗子：

// 模板文件中，字段是這樣的
{
  name: "<%= projectName %>"
}

// data就要這樣去寫
{
  projectName: "this is your project name"
}

這兩步的核心都是使用nodejs提供的child_process中exec方法去執(zhí)行命令來實(shí)現(xiàn)，exec能幫助我們?cè)诿钚兄袌?zhí)行shell命令，exec函數(shù)有對(duì)應(yīng)的回調(diào)方法來讓我們判斷命令執(zhí)行是否成功，核心代碼如下：

exec("npm install", (error, stdout, stderr) => {
  if (error) {
    // 出錯(cuò)了
  } else {
    // 成功了
  }
})

是不是很簡(jiǎn)單呢，想了解更多的操作可以搜索官方文檔查看哈，這里就不詳解了。

到這里，我們的cli已經(jīng)實(shí)現(xiàn)的差不多了，這里我們總結(jié)一下如何測(cè)試和發(fā)布吧

npm link  // 本地調(diào)試
npm publish  // 發(fā)布

通過npm link命令，即可以在命令行工具測(cè)試你的cli了，注意在package.json的bin字段中定義好入口命令和文件

// package.json
{
  "bin": {
    "begin": "bin/begin"
  }
}

OK，文章主要總結(jié)了編寫一個(gè)腳手架中init功能的思路以及一些實(shí)現(xiàn)的方法，具體一些細(xì)節(jié)仍有優(yōu)化的空間，歡迎大家討論！
文章的具體代碼可以參考我的倉庫begin-cli