教你從零開始搭建一款前端腳手架工具
寫於 2016.08.06
本文系原創，轉載請附帶作者資訊：Jrain Lau 專案地址：github.com/jrainlau/sc…
前言
在實際的開發過程中，從零開始建立專案的結構是一件讓人頭疼的事情，所以各種各樣的腳手架工具應運而生。筆者使用較多的yoeman，express-generator和vue-cli便是當中之一。它們功能豐富，但最核心的功能都是能夠快速搭建一個完整的專案的結構，開發者只需要在生成的專案結構的基礎上進行開發即可，非常簡單高效。
作為一個不折騰會死星人，在熟悉了使用方法以後就開始琢磨起它們的原理來了。經過仔細研究文件和原始碼，終於算是摸清了其核心的原理，並且依據這個原理自己搭建了一款叫做
現在讓我們就以SCION為例，從零開始搭建一款屬於我們自己的腳手架工具吧！
核心原理
yoeman搭建專案需要提供yoeman-generator。yoeman-generator本質上就是一個具備完整檔案結構的專案樣板，使用者需要手動地把這些generator下載到本地，然後yoeman就會根據這些generator自動生成各種不同的專案。
vue-cli提供了相當豐富的選項和設定功能，但是其本質也是從遠端倉庫把不同的模版拉取到本地，而並非是什麼“本地生成”的黑科技。
這樣看來，思路也就有了——首先建立不同的樣板專案，然後腳手架根據使用者的指令引用樣板專案生成實際專案。樣板專案可以內建在腳手架當中，也可以部署在遠端倉庫。為了更廣的適用範圍，SCION
技術選型
- node.js：整個腳手架工具的根本組成部分，推薦使用最新的版本。
- es6：新版本的
node.js對於es6的支援度已經非常高，使用es6能夠極大地提升開發效率和開發感受。 - commander：TJ大神開發的工具，能夠更好地組織和處理命令列的輸入。
- co：TJ大神開發的非同步流程控制工具，用更舒服的方式寫非同步程式碼。
- co-prompt：還是TJ大神的作品……傳統的命令列只能單行一次性地輸入所有引數和選項，使用這個工具可以自動提供提示資訊，並且分步接收使用者的輸入，體驗類似
npm init時的一步一步輸入引數的過程。
整體架構
國際慣例，著手開發之前得先弄明白整體架構，看圖：
首先明白模版的概念。一個模版就是一個專案的樣板，包含專案的完整結構和資訊。 模版的資訊都存放在一個叫做templates.json的檔案當中。 使用者可以通過命令列對templates.json進行新增、刪除、羅列的操作。 通過選擇不同的模版，SCION會自動從遠端倉庫把相應的模板拉取到本地，完成專案的搭建。
最終整個腳手架的檔案結構如下：
=================
|__ bin
|__ scion
|__ command
|__ add.js
|__ delete.js
|__ init.js
|__ list.js
|__ node_modules
|__ package.json
|__ templates.json
複製程式碼入口檔案
首先建立專案，在package.json裡面寫入依賴並執行npm install：
"dependencies": {
"chalk": "^1.1.3",
"co": "^4.6.0",
"co-prompt": "^1.0.0",
"commander": "^2.9.0"
}
複製程式碼在根目錄下建立\bin資料夾，在裡面建立一個無後綴名的scion檔案。這個bin\scion檔案是整個腳手架的入口檔案，所以我們首先對它進行編寫。
首先是一些初始化的程式碼：
#!/usr/bin/env node --harmony
'use strict'
// 定義腳手架的檔案路徑
process.env.NODE_PATH = __dirname + '/../node_modules/'
const program = require('commander')
// 定義當前版本
program
.version(require('../package').version )
// 定義使用方法
program
.usage('<command>')
複製程式碼從前文的架構圖中可以知道，腳手架支援使用者輸入4種不同的命令。現在我們來寫處理這4種命令的方法：
program
.command('add')
.description('Add a new template')
.alias('a')
.action(() => {
require('../command/add')()
})
program
.command('list')
.description('List all the templates')
.alias('l')
.action(() => {
require('../command/list')()
})
program
.command('init')
.description('Generate a new project')
.alias('i')
.action(() => {
require('../command/init')()
})
program
.command('delete')
.description('Delete a template')
.alias('d')
.action(() => {
require('../command/delete')()
})
複製程式碼commander的具體使用方法在這裡就不展開了，可以直接到官網去看詳細的文件。 最後別忘了處理引數和提供幫助資訊：
program.parse(process.argv)
if(!program.args.length){
program.help()
}
複製程式碼完整的程式碼請看這裡。 使用node執行這個檔案，看到輸出如下，證明入口檔案已經編寫完成了。
Usage: scion <command>
Commands:
add|a Add a new template
list|l List all the templates
init|i Generate a new project
delete|d Delete a template
Options:
-h, --help output usage information
-V, --version output the version number
複製程式碼處理使用者輸入
在專案根目錄下建立\command資料夾，專門用來存放命令處理檔案。 在根目錄下建立templates.json檔案並寫入如下內容，用來存放模版資訊：
{"tpl":{}}
複製程式碼新增模板
進入\command並新建add.js檔案：
'use strict'
const co = require('co')
const prompt = require('co-prompt')
const config = require('../templates')
const chalk = require('chalk')
const fs = require('fs')
module.exports = () => {
co(function *() {
// 分步接收使用者輸入的引數
let tplName = yield prompt('Template name: ')
let gitUrl = yield prompt('Git https link: ')
let branch = yield prompt('Branch: ')
// 避免重複新增
if (!config.tpl[tplName]) {
config.tpl[tplName] = {}
config.tpl[tplName]['url'] = gitUrl.replace(/[\u0000-\u0019]/g, '') // 過濾unicode字元
config.tpl[tplName]['branch'] = branch
} else {
console.log(chalk.red('Template has already existed!'))
process.exit()
}
// 把模板資訊寫入templates.json
fs.writeFile(__dirname + '/../templates.json', JSON.stringify(config), 'utf-8', (err) => {
if (err) console.log(err)
console.log(chalk.green('New template added!\n'))
console.log(chalk.grey('The last template list is: \n'))
console.log(config)
console.log('\n')
process.exit()
})
})
}
複製程式碼刪除模板
同樣的，在\command資料夾下建立delete.js檔案：
'use strict'
const co = require('co')
const prompt = require('co-prompt')
const config = require('../templates')
const chalk = require('chalk')
const fs = require('fs')
module.exports = () => {
co(function *() {
// 接收使用者輸入的引數
let tplName = yield prompt('Template name: ')
// 刪除對應的模板
if (config.tpl[tplName]) {
config.tpl[tplName] = undefined
} else {
console.log(chalk.red('Template does not exist!'))
process.exit()
}
// 寫入template.json
fs.writeFile(__dirname + '/../templates.json', JSON.stringify(config), 'utf-8', (err) => {
if (err) console.log(err)
console.log(chalk.green('Template deleted!'))
console.log(chalk.grey('The last template list is: \n'))
console.log(config)
console.log('\n')
process.exit()
})
})
}
複製程式碼羅列模板
建立list.js檔案：
'use strict'
const config = require('../templates')
module.exports = () => {
console.log(config.tpl)
process.exit()
}
複製程式碼構建專案
現在來到我們最重要的部分——構建專案。同樣的，在\command目錄下新建一個叫做init.js的檔案：
'use strict'
const exec = require('child_process').exec
const co = require('co')
const prompt = require('co-prompt')
const config = require('../templates')
const chalk = require('chalk')
module.exports = () => {
co(function *() {
// 處理使用者輸入
let tplName = yield prompt('Template name: ')
let projectName = yield prompt('Project name: ')
let gitUrl
let branch
if (!config.tpl[tplName]) {
console.log(chalk.red('\n × Template does not exit!'))
process.exit()
}
gitUrl = config.tpl[tplName].url
branch = config.tpl[tplName].branch
// git命令，遠端拉取專案並自定義專案名
let cmdStr = `git clone ${gitUrl} ${projectName} && cd ${projectName} && git checkout ${branch}`
console.log(chalk.white('\n Start generating...'))
exec(cmdStr, (error, stdout, stderr) => {
if (error) {
console.log(error)
process.exit()
}
console.log(chalk.green('\n √ Generation completed!'))
console.log(`\n cd ${projectName} && npm install \n`)
process.exit()
})
})
}
複製程式碼可以看到，這一部分程式碼也非常簡單，關鍵的一句話是
let cmdStr = `git clone ${gitUrl} ${projectName} && cd ${projectName} && git checkout ${branch}`
複製程式碼它的作用正是從遠端倉庫克隆到自定義目錄，並切換到對應的分支。熟悉git命令的同學應該明白，不熟悉的同學是時候補補課啦！
全域性使用
為了可以全域性使用，我們需要在package.json裡面設定一下：
"bin": {
"scion": "bin/scion"
},
複製程式碼本地除錯的時候，在根目錄下執行
npm link
複製程式碼即可把scion命令繫結到全域性，以後就可以直接以scion作為命令開頭而無需敲入長長的node scion之類的命令了。
現在我們的腳手架工具已經搭建好了，一起來嘗試一下吧！
使用測試
- add | a 新增模版命令
- init | i 生成專案命令
- delete | d 刪除模版命令 和 list | l 羅列模版命令
大功告成啦！現在我們的整個腳手架工具已經搭建完成了，以後只需要知道模板的git https地址和branch就可以不斷地往SCION上面新增，團隊協作的話只需要分享SCION的templates.json檔案就可以了。
後記
看起來並不複雜的東西，實際從零開始搭建也是頗費了一番心思。最大的難題是在開始的時候並不懂得如何像npm init那樣可以一步一步地處理使用者輸入，只懂得一條命令列把所有的引數都帶上，這樣的使用者體驗真的很不好。研究了vue-cli和yoeman也沒有找到相應的程式碼，只好不斷地google，最後總算找到了一篇文章，可以用co和co-prompt這兩個工具實現，再一次膜拜無所不能的TJ大神，也希望能夠有小夥伴告訴我vue-cli它們是怎麼實現的。
這個腳手架只具備最基本的功能，還遠遠沒有達到市面上同類產品的高度，在日後再慢慢填補吧，不管怎麼說，完成SCION的過程中真的學習到了很多東西。
感謝你的閱讀。我是Jrain，歡迎關注我的專欄，將不定期分享自己的學習體驗，開發心得，搬運牆外的乾貨。下次見啦！