仿 vue-cli 搭建屬於本身的腳手架

腳手架是啥

從前我總以爲腳手架是個很高大上的東西，好像得牛叉🐂一點的人才寫的出來，可望而不可即。其實並非由於困難使咱們放棄，而是由於放棄才顯得困難（這是個好詞好句🙈）。只要你肯花個一天半天的時間✊，也能寫出屬於你本身的腳手架。
早前腳手架這個詞是從 vue-cli 這裏認識的，咱們經過 npm install -g vue-cli 命令全局安裝腳手架後, 再執行 vue init webpack project-name 就能初始化好一個本身的項目，真是尼瑪的神奇😯。但你有沒有想過爲何咱們執行 vue init 這個命令就能有個本身的項目呢。今天，就讓咱們一塊兒來揭開廬山真面目吧！
等等✋，扯了一堆，你好像還沒說下啥是腳手架？emmm... 它就是個工具，方便咱們新建項目用的，有了這個項目咱們就能直接開發了。其實咱們本能夠用 git clone url 來新建（複製）項目，再 cuo 一點的方法就是複製粘貼整個文件夾，同樣也能達到初始化的目的。腳手架的本質也是從遠程下載一個模板來進行一個新項目。額。因此。。。有什麼不一樣呢？就高大上啊😧。固然不止於此啦，腳手架但是高級版的克隆，它主要是提供了交互式的命令讓咱們能夠動態的更改模板，而後用一句命令就能夠一勞永逸了（固然仍是要維護的），這應該是最主要的區別吧，反正如今我是這麼想的😢。
好了，本章的目的就是帶領你們寫一個簡易版的腳手架 xr-cli（名字愛取啥取啥），目標是實現一個 xr init template-name project-name 這樣的命令，廢話少說，開始進入正題吧🚀🚀🚀。

源碼地址：github.com/lgq627628/x…

前置知識

其實一個簡易版的 xr-cli 的代碼量並很少，因此這裏咱們先來小小介紹一下其中要依賴的包，若是你用過這些工具能夠跳過，沒用過的請務必必定要瞟一眼。

commander

這是用來編寫指令和處理命令行的，具體用法以下：

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

回憶一下，咱們曾用過的 vue init 的命令就是這樣聲明的。

inquirer

這是個強大的交互式命令行工具，具體用法以下：

const inquirer = require('inquirer');
inquirer
  .prompt([
    // 一些交互式的問題
  ])
  .then(answers => {
    // 回調函數，answers 就是用戶輸入的內容，是個對象
  });
複製代碼

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

chalk

這是用來修改控制檯輸出內容樣式的，好比顏色啊，具體用法以下：

const chalk = require('chalk');
console.log(chalk.green('success'));
console.log(chalk.red('error'));
複製代碼

ora

這是一個好看的加載，就是你下載的時候會有個轉圈圈的那種效果，用法以下：

const ora = require('ora')
let spinner = ora('downloading template ...')
spinner.start()
複製代碼

download-git-repo

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

const download = require('download-git-repo')
download(repository, destination, options, callback)
複製代碼

其中 repository 是遠程倉庫地址；destination 是存放下載的文件路徑，也能夠直接寫文件名，默認就是當前目錄；options 是一些選項，好比 { clone：boolean } 表示用 http download 仍是 git clone 的形式下載。

目錄搭建

ok，有了上面的知識儲備以後，咱們就正式開始擼了。

1. 首先咱們要建立一個文件夾，並取名叫 xr-cli；
2. 在該目錄下執行 npm init 命令（你應該有安裝 node 吧😂），一路回車，就會生成一個生成 package.json 文件，在 package.json 裏面寫入如下依賴並執行 npm install 安裝，以下：

"dependencies": {
    "chalk": "^2.4.2",
    "commander": "^2.19.0",
    "download-git-repo": "^1.1.0",
    "inquirer": "^6.2.2",
    "ora": "^3.2.0"
}
複製代碼

3. 新建一個 bin 文件夾，並在 bin 目錄下新建一個無後綴名的 xr 文件，並寫上：

#!/usr/bin/env node
console.log('hello');
複製代碼

這個文件就是咱們整個腳手架的入口文件，咱們用 node ./bin/xr 運行一下，就能在控制檯打印出 hello，以下圖：

這裏要注意開頭的 #!/usr/bin/env node 這個語句必須加上，主要是爲了讓系統看到這一行的時候，會沿着該路徑去查找 node 並執行，主要是爲了兼容 Mac ，確保可執行。

bin 目錄初始化

當前，bin 目錄下就只有一個文件，就是入口文件 xr。因此如今咱們先來編寫這個文件，因爲內容較少，咱們直接看代碼：

#!/usr/bin/env node
const program = require('commander')

// 定義當前版本
// 定義使用方法
// 定義四個指令
program
  .version(require('../package').version)
  .usage('<command> [options]')
  .command('add', 'add a new template')
  .command('delete', 'delete a template')
  .command('list', 'list all the templates')
  .command('init', 'generate a new project from a template')
  
// 解析命令行參數
program.parse(process.argv)
複製代碼

這個文件的主要做用就是定義指令，如今咱們用 node ./bin/xr 運行一下，就能看到以下結果：

固然，你可能會以爲每次輸入 node ./bin/xr 這個命令有點麻煩，不要緊，咱們能夠在 package.json 裏面寫入已下內容：

// bin 用來指定每一個命令所對應的可執行文件的位置
"bin": {
    "xr": "bin/xr"
}
複製代碼

而後在根目錄下執行 npm link（就是把命令掛載到全局的意思），這樣咱們每次只要輸入 xr，就能夠直接運行了，so cool，就像下面這樣：

是否是好像有點樣子了呢😁😁😁，那就讓咱們繼續完善下 bin 目錄吧！ok，讓咱們在 bin 目錄下再新建四個文件，分別對應上面的四個指令，而後分別處理四個指令要作的事情，以下圖：

一樣的，咱們修改一下 package.json 裏面的 bin 內容，以下：

"bin": {
    "xr": "bin/xr",
    "xr-add": "bin/xr-add",
    "xr-delete": "bin/xr-delete",
    "xr-list": "bin/xr-list",
    "xr-init": "bin/xr-init"
}
複製代碼

而後執行 npm unlink 解綁全局命令，再執行 npm link 從新把命令綁定到全局，就像下面這樣：

最後順便在根目錄下新建一個 template.json 文件，裏面的內容就是一個 {}。

編寫具體指令

好了，一切準備就緒，接下來就讓咱們來寫下具體的四個指令吧。

xr-add

這個內容也是比較少，直接看代碼：

#!/usr/bin/env node

// 交互式命令行
const inquirer = require('inquirer')
// 修改控制檯字符串的樣式
const chalk = require('chalk')
// node 內置文件模塊
const fs = require('fs')
// 讀取根目錄下的 template.json
const tplObj = require(`${__dirname}/../template`)

// 自定義交互式命令行的問題及簡單的校驗
let question = [
  {
    name: "name",
    type: 'input',
    message: "請輸入模板名稱",
    validate (val) {
      if (val === '') {
        return 'Name is required!'
      } else if (tplObj[val]) {
        return 'Template has already existed!'
      } else {
        return true
      }
    }
  },
  {
    name: "url",
    type: 'input',
    message: "請輸入模板地址",
    validate (val) {
      if (val === '') return 'The url is required!'
      return true
    }
  }
]

inquirer
  .prompt(question).then(answers => {
    // answers 就是用戶輸入的內容，是個對象
    let { name, url } = answers;
    // 過濾 unicode 字符
    tplObj[name] = url.replace(/[\u0000-\u0019]/g, '')
    // 把模板信息寫入 template.json 文件中
    fs.writeFile(`${__dirname}/../template.json`, JSON.stringify(tplObj), 'utf-8', err => {
      if (err) console.log(err)
      console.log('\n')
      console.log(chalk.green('Added successfully!\n'))
      console.log(chalk.grey('The latest template list is: \n'))
      console.log(tplObj)
      console.log('\n')
    })
  })
複製代碼

這個文件主要目的就是添加模板並存儲起來，上面的註釋應該都寫的挺清楚了。咱們執行 xr add 來看看效果：

這裏的模板名稱（本身隨便取）至關於 vue init webpack project-name 當中的 webpack；模板地址要注意一下，像下面這樣寫就能夠，這裏以 github 爲例：

這裏補充一下 xr add 怎麼對應到 xr-add 的：咱們前面在定義 program.command('add').action(() => {}) 的時候沒有寫 action 這個回調函數，而當咱們執行 xr add 的時候，commander 會嘗試在入口腳本的目錄中搜索可執行文件，找到形如 program-command（這裏就是 xr-add）的命令來執行，大概是這麼個意思，下面的命令也是同樣的道理。

xr-delete

若是你理解了上面的那個步驟，這步對你來講應該也是灑灑水啦！上代碼：

#!/usr/bin/env node

const inquirer = require('inquirer')
const chalk = require('chalk')
const fs = require('fs')
const tplObj = require(`${__dirname}/../template`)

let question = [
  {
    name: "name",
    message: "請輸入要刪除的模板名稱",
    validate (val) {
      if (val === '') {
        return 'Name is required!'
      } else if (!tplObj[val]) {
        return 'Template does not exist!'
      } else  {
        return true
      }
    }
  }
]

inquirer
  .prompt(question).then(answers => {
    let { name } = answers;
    delete tplObj[name]
    // 更新 template.json 文件
    fs.writeFile(`${__dirname}/../template.json`, JSON.stringify(tplObj), 'utf-8', err => {
      if (err) console.log(err)
      console.log('\n')
      console.log(chalk.green('Deleted successfully!\n'))
      console.log(chalk.grey('The latest template list is: \n'))
      console.log(tplObj)
      console.log('\n')
    })
  })
複製代碼

應該很好理解，就不過多解釋了，咱們直接執行 xr delete 看下效果：

xr-list

這個更簡單了，兩行代碼搞定：

#!/usr/bin/env node

const tplObj = require(`${__dirname}/../template`)
console.log(tplObj)
複製代碼

是否是簡單到爆💥。咱們執行 xr list 看看效果：

由於剛纔一添加一刪除，因此目前沒有模板，就輸出 {}。

xr-init

這應該是最主要（但不難）的一步了，畢竟咱們寫到如今尚未經過命令初始化過一個項目呢😭。因此這步的重點就是執行 download 方法，並傳入相應參數，具體看代碼：

#!/usr/bin/env node

const program = require('commander')
const chalk = require('chalk')
const ora = require('ora')
const download = require('download-git-repo')
const tplObj = require(`${__dirname}/../template`)

program
  .usage('<template-name> [project-name]')
program.parse(process.argv)
// 當沒有輸入參數的時候給個提示
if (program.args.length < 1) return program.help()

// 比如 vue init webpack project-name 的命令同樣，第一個參數是 webpack，第二個參數是 project-name
let templateName = program.args[0]
let projectName = program.args[1]
// 小小校驗一下參數
if (!tplObj[templateName]) {
  console.log(chalk.red('\n Template does not exit! \n '))
  return
}
if (!projectName) {
  console.log(chalk.red('\n Project should not be empty! \n '))
  return
}

url = tplObj[templateName]

console.log(chalk.white('\n Start generating... \n'))
// 出現加載圖標
const spinner = ora("Downloading...");
spinner.start();
// 執行下載方法並傳入參數
download (
  url,
  projectName,
  err => {
    if (err) {
      spinner.fail();
      console.log(chalk.red(`Generation failed. ${err}`))
      return
    }
    // 結束加載圖標
    spinner.succeed();
    console.log(chalk.green('\n Generation completed!'))
    console.log('\n To get started')
    console.log(`\n cd ${projectName} \n`)
  }
)
複製代碼

ok，咱們執行一下 xr init simple test，記得先執行一下 xr add：

如今咱們就能夠在左側的目錄中看到 test 項目了，以下圖：

至此，一個小小的腳手架就作完了。🌹🌹🌹此處應該有鮮花和掌聲👏👏👏

發佈到 npm

既然以上命令都執行成功了，那接下來咱們就把它發佈到 npm 上吧（寫都寫了，不能浪費😬）。

• 刪除 test 文件夾，它就本地測試用的，用完就拋棄它（固然作人不能這樣）
• 在根目錄下新建 README.md 文件，隨便寫點使用說明，僞裝正經一下
• 在根目錄下新建 .npmignore 文件，並寫入 /node_modules，意思就是發佈的時候忽略 node_modules 文件夾，
• 去 npm 官網註冊個帳號（很簡單的），同時搜索一下 xr-cli 這個名字，看看有沒有人用，有的話就換一個羅

  

  如今讓咱們回到項目根目錄，執行 npm login 登入 npm 帳號，再執行 npm publish 發佈，就像下面這樣：

  

  沒錯，就是這樣兩個簡單的命令，咱們就發佈成功啦，真是可喜可賀🍺🍺🍺。大概過一分鐘左右（反正挺快的），咱們再去 npm 官網搜下 xr-cli，就能夠看到本身的腳手架啦，哈哈哈哈，賊開心👍👍👍。

  

這裏補充說明一點：根據規範，只有在發包的24小時內才容許撤銷發佈的包，因此爲了避免污染 npm 網站，若是隻是測試的話就執行 npm unpublish --force 刪除吧，畢竟咱們都是有素質的人。

小試牛刀

別急，尚未結束🙅‍♀️。發都發出去了，怎麼也得驗證一波撒。嗯，說的有道理，沒法反駁，那就趕忙驗收吧！這裏咱們記得先用 npm unlink 解綁一下命令，否則會相互影響。下面咱們打開終端，輸入 npm i xr-cli -g 全局安裝一下腳手架，而後執行 xr，若是出現下圖中的模樣就說明已經安裝成功了。

接下來進入到桌面，執行 xr init simple xr-test，不一會就能夠在桌面上看到本身的項目啦。

6️⃣6️⃣6️⃣，大讚無疆，大。。贊。。。無疆！！！

結語

上面的操做只要你熟悉了幾遍以後，再去看看 vue-cli 的源碼結構，你就會有種撥開雲霧見月明的感受（它只是比咱們這個腳手架完善不少不少不少而已😭😭😭）。 固然了，這只是渣渣版本。你能夠往裏面添加更多的東西，好比自動化構建和動態模板啊（其實動態模板是個大頭），而後嘗試寫下更多更好的交互和功能，這樣你就也能擁有一個屬於本身的腳手架啦，心動不如行動，還等什麼呢，不要998，只要有鍵盤，趕忙敲吧同志們，Let's go！🌈