建站
咨詢
售后
建站咨詢
新聞中心
前言
在實(shí)際的開(kāi)發(fā)過(guò)程中，從零開(kāi)始建立項(xiàng)目的結(jié)構(gòu)是一件讓人頭疼的事情，所以各種各樣的腳手架工具應(yīng)運(yùn)而生。筆者使用較多的yoeman，express-generator和vue-cli便是當(dāng)中之一。它們功能豐富，但最核心的功能都是能夠快速搭建一個(gè)完整的項(xiàng)目的結(jié)構(gòu)，開(kāi)發(fā)者只需要在生成的項(xiàng)目結(jié)構(gòu)的基礎(chǔ)上進(jìn)行開(kāi)發(fā)即可，非常簡(jiǎn)單高效。
作為一個(gè)不折騰會(huì)死星人，在熟悉了使用方法以后就開(kāi)始琢磨起它們的原理來(lái)了。經(jīng)過(guò)仔細(xì)研究文檔和源碼，終于算是摸清了其核心的原理，并且依據(jù)這個(gè)原理自己搭建了一款叫做SCION的腳手架。
現(xiàn)在讓我們就以SCION為例，從零開(kāi)始搭建一款屬于我們自己的腳手架工具吧!
核心原理
yoeman搭建項(xiàng)目需要提供yoeman-generator。yoeman-generator本質(zhì)上就是一個(gè)具備完整文件結(jié)構(gòu)的項(xiàng)目樣板，用戶需要手動(dòng)地把這些generator下載到本地，然后yoeman就會(huì)根據(jù)這些generator自動(dòng)生成各種不同的項(xiàng)目。
vue-cli提供了相當(dāng)豐富的選項(xiàng)和設(shè)定功能，但是其本質(zhì)也是從遠(yuǎn)程倉(cāng)庫(kù)把不同的模版拉取到本地，而并非是什么“本地生成”的黑科技。
這樣看來(lái)，思路也就有了——首先建立不同的樣板項(xiàng)目，然后腳手架根據(jù)用戶的指令引用樣板項(xiàng)目生成實(shí)際項(xiàng)目。樣板項(xiàng)目可以內(nèi)置在腳手架當(dāng)中，也可以部署在遠(yuǎn)程倉(cāng)庫(kù)。為了更廣的適用范圍，SCION采用的是第二種方式。
技術(shù)選型
- node.js：整個(gè)腳手架工具的根本組成部分，推薦使用***的版本。
- es6：新版本的node.js對(duì)于es6的支持度已經(jīng)非常高，使用es6能夠極大地提升開(kāi)發(fā)效率和開(kāi)發(fā)感受。
- commander：TJ大神開(kāi)發(fā)的工具，能夠更好地組織和處理命令行的輸入。
- co：TJ大神開(kāi)發(fā)的異步流程控制工具，用更舒服的方式寫(xiě)異步代碼。
- co-prompt：還是TJ大神的作品……傳統(tǒng)的命令行只能單行一次性地輸入所有參數(shù)和選項(xiàng)，使用這個(gè)工具可以自動(dòng)提供提示信息，并且分步接收用戶的輸入，體驗(yàn)類似npm init時(shí)的一步一步輸入?yún)?shù)的過(guò)程。
整體架構(gòu)
國(guó)際慣例，著手開(kāi)發(fā)之前得先弄明白整體架構(gòu)，看圖：
首先明白模版的概念。一個(gè)模版就是一個(gè)項(xiàng)目的樣板，包含項(xiàng)目的完整結(jié)構(gòu)和信息。
模版的信息都存放在一個(gè)叫做templates.json的文件當(dāng)中。
用戶可以通過(guò)命令行對(duì)templates.json進(jìn)行添加、刪除、羅列的操作。
通過(guò)選擇不同的模版，SCION會(huì)自動(dòng)從遠(yuǎn)程倉(cāng)庫(kù)把相應(yīng)的模板拉取到本地，完成項(xiàng)目的搭建。
最終整個(gè)腳手架的文件結(jié)構(gòu)如下：
- =================
- |__ bin
- |__ scion
- |__ command
- |__ add.js
- |__ delete.js
- |__ init.js
- |__ list.js
- |__ node_modules
- |__ package.json
- |__ templates.json
入口文件
首先建立項(xiàng)目，在package.json里面寫(xiě)入依賴并執(zhí)行npm install：
- "dependencies": {
- "chalk": "^1.1.3",
- "co": "^4.6.0",
- "co-prompt": "^1.0.0",
- "commander": "^2.9.0"
- }
在根目錄下建立\bin文件夾，在里面建立一個(gè)無(wú)后綴名的scion文件。這個(gè)bin\scion文件是整個(gè)腳手架的入口文件，所以我們首先對(duì)它進(jìn)行編寫(xiě)。
首先是一些初始化的代碼：
- #!/usr/bin/env node --harmony
- 'use strict'
- // 定義腳手架的文件路徑
- process.env.NODE_PATH = __dirname + '/../node_modules/'
- const program = require('commander')
- // 定義當(dāng)前版本
- program
- .version(require('../package').version )
- // 定義使用方法
- program
- .usage('
')
從前文的架構(gòu)圖中可以知道，腳手架支持用戶輸入4種不同的命令?，F(xiàn)在我們來(lái)寫(xiě)處理這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的具體使用方法在這里就不展開(kāi)了，可以直接到官網(wǎng)去看詳細(xì)的文檔。
***別忘了處理參數(shù)和提供幫助信息：
- program.parse(process.argv)
- if(!program.args.length){
- program.help()
- }
完整的代碼請(qǐng)看這里。
使用node運(yùn)行這個(gè)文件，看到輸出如下，證明入口文件已經(jīng)編寫(xiě)完成了。
- Usage: scion
- 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
處理用戶輸入
在項(xiàng)目根目錄下建立\command文件夾，專門(mén)用來(lái)存放命令處理文件。
在根目錄下建立templates.json文件并寫(xiě)入如下內(nèi)容，用來(lái)存放模版信息：
- {"tpl":{}}
添加模板
進(jìn)入\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 *() {
- // 分步接收用戶輸入的參數(shù)
- let tplName = yield prompt('Template name: ')
- let gitUrl = yield prompt('Git https link: ')
- let branch = yield prompt('Branch: ')
- // 避免重復(fù)添加
- if (!config.tpl[tplName]) {
- config.tpl[tplName] = {}
- config.tpl[tplName]['url'] = gitUrl.replace(/[\u0000-\u0019]/g, '') // 過(guò)濾unicode字符
- config.tpl[tplName]['branch'] = branch
- } else {
- console.log(chalk.red('Template has already existed!'))
- process.exit()
- }
- // 把模板信息寫(xiě)入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 *() {
- // 接收用戶輸入的參數(shù)
- let tplName = yield prompt('Template name: ')
- // 刪除對(duì)應(yīng)的模板
- if (config.tpl[tplName]) {
- config.tpl[tplName] = undefined
- } else {
- console.log(chalk.red('Template does not exist!'))
- process.exit()
- }
- // 寫(xiě)入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()
- }
構(gòu)建項(xiàng)目
現(xiàn)在來(lái)到我們最重要的部分——構(gòu)建項(xiàng)目。同樣的，在\command目錄下新建一個(gè)叫做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命令，遠(yuǎn)程拉取項(xiàng)目并自定義項(xiàng)目名
- 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()
- })
- })
- }
可以看到，這一部分代碼也非常簡(jiǎn)單，關(guān)鍵的一句話是
- let cmdStr = `git clone ${gitUrl} ${projectName} && cd ${projectName} && git checkout ${branch}`
它的作用正是從遠(yuǎn)程倉(cāng)庫(kù)克隆到自定義目錄，并切換到對(duì)應(yīng)的分支。熟悉git命令的同學(xué)應(yīng)該明白，不熟悉的同學(xué)是時(shí)候補(bǔ)補(bǔ)課啦!
全局使用
為了可以全局使用，我們需要在package.json里面設(shè)置一下：
- "bin": {
- "scion": "bin/scion"
- },
本地調(diào)試的時(shí)候，在根目錄下執(zhí)行
- npm link
即可把scion命令綁定到全局，以后就可以直接以scion作為命令開(kāi)頭而無(wú)需敲入長(zhǎng)長(zhǎng)的node scion之類的命令了。
現(xiàn)在我們的腳手架工具已經(jīng)搭建好了，一起來(lái)嘗試一下吧!
使用測(cè)試
- add | a 添加模版命令
-
init | i 生成項(xiàng)目命令
-
delete | d 刪除模版命令 和 list | l 羅列模版命令
大功告成啦!現(xiàn)在我們的整個(gè)腳手架工具已經(jīng)搭建完成了，以后只需要知道模板的git https地址和branch就可以不斷地往SCION上面添加，團(tuán)隊(duì)協(xié)作的話只需要分享SCION的templates.json文件就可以了。
后記
看起來(lái)并不復(fù)雜的東西，實(shí)際從零開(kāi)始搭建也是頗費(fèi)了一番心思。***的難題是在開(kāi)始的時(shí)候并不懂得如何像npm init那樣可以一步一步地處理用戶輸入，只懂得一條命令行把所有的參數(shù)都帶上，這樣的用戶體驗(yàn)真的很不好。研究了vue-cli和yoeman也沒(méi)有找到相應(yīng)的代碼，只好不斷地google，***總算找到了一篇文章，可以用co和co-prompt這兩個(gè)工具實(shí)現(xiàn)，再一次膜拜無(wú)所不能的TJ大神，也希望能夠有小伙伴告訴我vue-cli它們是怎么實(shí)現(xiàn)的。
這個(gè)腳手架只具備最基本的功能，還遠(yuǎn)遠(yuǎn)沒(méi)有達(dá)到市面上同類產(chǎn)品的高度，在日后再慢慢填補(bǔ)吧，不管怎么說(shuō)，完成SCION的過(guò)程中真的學(xué)習(xí)到了很多東西。
感謝你的閱讀。
當(dāng)前文章：教你從零開(kāi)始搭建一款前端腳手架工具
當(dāng)前URL：http://m.fisionsoft.com.cn/article/djjdsho.html
