也來(lái)盤(pán)盤(pán)前端腳手架的那些事兒
本來(lái)早就想寫(xiě)這篇文章的，由于有其他事情耽擱了（可能還是因?yàn)樘珣校?，就拖到了現(xiàn)在，如果再不記下來(lái)，估計(jì)會(huì)拋到九霄云外了。
NodeJs的出現(xiàn)，讓前端工程化的理念不斷深入，正在向正規(guī)軍靠近。先是帶來(lái)了Gulp、Webpack等強(qiáng)大的構(gòu)建工具，隨后又出現(xiàn)了vue-cli和create-react-app等完善的腳手架，提供了完整的項(xiàng)目架構(gòu)，讓我們可以更多的關(guān)注業(yè)務(wù)，而不必在項(xiàng)目基礎(chǔ)設(shè)施上花費(fèi)大量時(shí)間。
但是，這些現(xiàn)成的腳手架未必就能滿(mǎn)足我們的業(yè)務(wù)需求，也未必是最佳實(shí)踐，這時(shí)我們就可以自己來(lái)開(kāi)發(fā)一個(gè)腳手架。當(dāng)然，這其實(shí)很簡(jiǎn)單，利用npm上現(xiàn)成的輪子就可以搞定，這里做個(gè)記錄，僅當(dāng)備忘，以?huà)伌u引玉。
緣起
在上半年的一個(gè)項(xiàng)目中需要自定義一個(gè)腳手架，來(lái)幫助小伙伴們提高開(kāi)發(fā)效率，統(tǒng)一代碼輸出質(zhì)量，并解決一些使用上的問(wèn)題，當(dāng)然也是為了裝裝逼。
在使用腳手架方式構(gòu)建之前，我們遇到了這幾個(gè)問(wèn)題：
- 每個(gè)項(xiàng)目創(chuàng)建的時(shí)候，需要去Git倉(cāng)庫(kù)拉取項(xiàng)目模板或者拷貝之前的項(xiàng)目，這樣做有兩個(gè)問(wèn)題
- 從Git拉取項(xiàng)目后，由于部分人員是有推送權(quán)限的，如果他誤操作將私有項(xiàng)目中的修改推送到了模板倉(cāng)庫(kù)，可能會(huì)破壞Git上的項(xiàng)目模板
- 從之前項(xiàng)目拷貝就無(wú)法獲取最新的項(xiàng)目模板，這就導(dǎo)致有些問(wèn)題明明在最新的模板中已經(jīng)修復(fù)，卻在新項(xiàng)目中依然存在
- 項(xiàng)目模板需要填寫(xiě)一些配置信息，開(kāi)發(fā)人員很容易忘記填寫(xiě)
所以我們來(lái)解決這些問(wèn)題，思路如下：
- 從Git上拉取最新模板，最后干掉Git倉(cāng)庫(kù)信息，切斷和遠(yuǎn)程倉(cāng)庫(kù)的關(guān)聯(lián)
- 在初始化時(shí)，通過(guò)問(wèn)答方式強(qiáng)制讓使用者輸入配置信息，再根據(jù)配置信息生成配置文件，有點(diǎn)類(lèi)似VueCli初始化項(xiàng)目那樣。
當(dāng)然，除了上述需求，我們還可以再做些額外工作：
- 拉取完成后自動(dòng)安裝項(xiàng)目依賴(lài)，并打開(kāi)編輯器
- 提供幫助信息及常用命令查看
- 發(fā)布到NPM，所有人員都可以直接全局安裝使用
- ...
急急如律令
實(shí)現(xiàn)可執(zhí)行模塊
首先，我們需要?jiǎng)?chuàng)建一個(gè)項(xiàng)目，這里就叫yncms-template-cli, 項(xiàng)目結(jié)構(gòu)如下：
- - commands // 此文件夾用于放置自定義命令
- - utils
- - index.js // 項(xiàng)目入口
- - readme.md
為了測(cè)試，我們先在index.js放點(diǎn)內(nèi)容：
- #!/usr/bin/env node
- // 必須在文件頭添加如上內(nèi)容指定運(yùn)行環(huán)境為node
- console.log('hello cli');
對(duì)于一般的nodejs項(xiàng)目，我們直接使用node index.js就可以了，但是這里是腳手架，肯定不能這樣。我們需要把項(xiàng)目發(fā)布到npm，用戶(hù)進(jìn)行全局安裝，然后就可以直接使用我們自定義的命令，類(lèi)似yncms-template這樣。
所以，我們需要將我們的項(xiàng)目做下改動(dòng)，首先在packge.json中添加如下內(nèi)容：
- "bin": {
- "yncms-template": "index.js"
- },
這樣就可以將yncms-template定義為一個(gè)命令了，但此時(shí)僅僅只能在項(xiàng)目中使用，還不能作為全局命令使用，這里我們需要使用npm link將其鏈接到全局命令，執(zhí)行成功后在你的全局node_modules目錄下可以找到相應(yīng)文件。然后輸入命令測(cè)試一下，如果出現(xiàn)如下內(nèi)容說(shuō)明第一步已經(jīng)成功一大半了：
- PS E:\WorkSpace\yncms-template-cli> yncms-template
- hello cli
但是，目前這個(gè)命令只有我們自己電腦可以用，要想其他人也能安裝使用，需要將它發(fā)布到npm，大致流程如下：
- 注冊(cè)一個(gè)npm賬戶(hù)，已有賬戶(hù)的可以跳過(guò)這一步
- 使用npm login登錄，需要輸入username、password、email
- 使用npm public發(fā)布
這一步比較簡(jiǎn)單，不多說(shuō)，但是請(qǐng)注意如下幾點(diǎn)：
- 使用了nrm的需要先將源切換到npm官方源
- package.json中有幾個(gè)字段需要完善：
- name為發(fā)布的包名，不能和npm已有的包重復(fù)
- version為版本信息，每次發(fā)布都必須要比線(xiàn)上的版本高
- homepage、bugs、repository也可以添加上，對(duì)應(yīng)如下頁(yè)面
- 在readme.md加入腳手架介紹及使用方法，方便他人使用。如果需要在文檔中加入徽標(biāo)，展示腳手架的下載次數(shù)之類(lèi)的，可以在這里生成。
發(fā)布成功后，需要等待一會(huì)兒才可以在npm倉(cāng)庫(kù)搜索到。
創(chuàng)建命令
既然是腳手架，肯定不能只讓它輸出一段文字吧，我們還需要定義一些命令，用戶(hù)在命令行輸入這些命令和參數(shù)，腳手架會(huì)做出對(duì)應(yīng)的操作。這里不需要我們自己去解析這些輸入的命令和參數(shù)，有現(xiàn)成的輪子(commander)可以使用，完全可以滿(mǎn)足我們的需要。
幫助（--help）
安裝好commander后，我們將index.js中內(nèi)容改為如下：
- #!/usr/bin/env node
- const commander = require('commander');
- // 利用commander解析命令行輸入，必須寫(xiě)在所有內(nèi)容最后面
- commander.parse(process.argv);
這時(shí)，雖然我們沒(méi)有定義任何命令，但是commander內(nèi)部給我們定義了一個(gè)幫助命令--help(簡(jiǎn)寫(xiě)-h):
- PS E:\WorkSpace\yncms-template-cli> yncms-template -h
- Usage: index [options]
- Options:
- -h, --help output usage information
版本（--version）
接下來(lái)，我們?cè)賱?chuàng)建一個(gè)查詢(xún)版本的命令參數(shù)，在index.js增加如下內(nèi)容：
- // 查看版本號(hào)
- commander.version(require('./package.json').version);
這樣，我們?cè)诿钚芯涂梢圆榭窗姹咎?hào)了:
- PS E:\WorkSpace\yncms-template-cli> yncms-template -V
- 1.0.10
- PS E:\WorkSpace\yncms-template-cli> yncms-template --version
- 1.0.10
默認(rèn)參數(shù)是大寫(xiě)V,如果需要改成小寫(xiě)，將上面內(nèi)容做如下改動(dòng)即可：
- // 查看版本號(hào)
- commander
- .version(require('./package.json').version)
- .option('-v,--version', '查看版本號(hào)');
- PS E:\WorkSpace\yncms-template-cli> yncms-template -h
- Usage: index [options]
- Options:
- -V, --version output the version number
- -h, --help output usage information
init子命令
接下來(lái)，我們來(lái)定義一個(gè)init命令，如yncms-template init test。
在index.js中增加如下內(nèi)容：
- commander
- .command('init <name>') // 定義init子命令，<name>為必需參數(shù)可在action的function中接收，如需設(shè)置非必需參數(shù)，可使用中括號(hào)
- .option('-d, --dev', '獲取開(kāi)發(fā)版') // 配置參數(shù)，簡(jiǎn)寫(xiě)和全寫(xiě)中使用,分割
- .description('創(chuàng)建項(xiàng)目') // 命令描述說(shuō)明
- .action(function (name, option) { // 命令執(zhí)行操作，參數(shù)對(duì)應(yīng)上面的設(shè)置的參數(shù)
- // 我們需要執(zhí)行的所有操作，都在這里完成
- console.log(name);
- console.log(option.dev);
- });
現(xiàn)在測(cè)試一下：
- PS E:\WorkSpace\yncms-template-cli> yncms-template init test -d
- test
- true
commander具體的用法，請(qǐng)自行查看官方文檔。
如此，一個(gè)自定義命令雛形就算完成了，然還有幾件事情要做：
- 實(shí)現(xiàn)init命令具體執(zhí)行的操作，下面會(huì)有單獨(dú)部分來(lái)說(shuō)。
- 為了方便維護(hù)，將命令action拆分到commands文件夾中
拉取項(xiàng)目
上面，我們定義了init命令，但是并沒(méi)有達(dá)到初始化項(xiàng)目的目的，接下來(lái)我們就實(shí)現(xiàn)一下。
一般來(lái)說(shuō)，項(xiàng)目模板有兩種處理方式：
- 將項(xiàng)目模板和本腳手架放在一起，好處是用戶(hù)安裝腳手架后，模板在本地，初始化會(huì)比較快；缺點(diǎn)是項(xiàng)目模板更新比較麻煩，因?yàn)楹湍_手架耦合在一起了
- 將項(xiàng)目放置到單獨(dú)的GIT倉(cāng)庫(kù)，好處是模板更新比較簡(jiǎn)單，因?yàn)槭窍嗷オ?dú)立的，只需要維護(hù)模板自己的倉(cāng)庫(kù)即可，另外可以控制拉取權(quán)限，因?yàn)槿绻撬接许?xiàng)目，那么沒(méi)有權(quán)限的人員是無(wú)法拉取成功的；缺點(diǎn)就是每次初始化都要去GIT拉取，可能會(huì)慢點(diǎn)，不過(guò)影響不大，所以建議選擇此種方式
首先，我們利用download-git-repo封裝一個(gè)clone方法，用于從git拉取項(xiàng)目。
- // utils/clone.js
- const download = require('download-git-repo');
- const symbols = require('log-symbols'); // 用于輸出圖標(biāo)
- const ora = require('ora'); // 用于輸出loading
- const chalk = require('chalk'); // 用于改變文字顏色
- module.exports = function (remote, name, option) {
- const downSpinner = ora('正在下載模板...').start();
- return new Promise((resolve, reject) => {
- download(remote, name, option, err => {
- if (err) {
- downSpinner.fail();
- console.log(symbols.error, chalk.red(err));
- reject(err);
- return;
- };
- downSpinner.succeed(chalk.green('模板下載成功！'));
- resolve();
- });
- });
- };
- // commands/init.js
- const shell = require('shelljs');
- const symbols = require('log-symbols');
- const clone = require('../utils/clone.js');
- const remote = 'https://gitee.com/letwrong/cli-demo.git';
- let branch = 'master';
- const initAction = async (name, option) => {
- // 0. 檢查控制臺(tái)是否可以運(yùn)行`git `，
- if (!shell.which('git')) {
- console.log(symbols.error, '對(duì)不起，git命令不可用！');
- shell.exit(1);
- }
- // 1. 驗(yàn)證輸入name是否合法
- if (fs.existsSync(name)) {
- console.log(symbols.warning,`已存在項(xiàng)目文件夾${name}！`);
- return;
- }
- if (name.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) {
- console.log(symbols.error, '項(xiàng)目名稱(chēng)存在非法字符！');
- return;
- }
- // 2. 獲取option，確定模板類(lèi)型（分支）
- if (option.dev) branch = 'develop';
- // 4. 下載模板
- await clone(`direct:${remote}#${branch}`, name, { clone: true });
- };
- module.exports = initAction;
測(cè)試一下，不出意外就可以成功拉取項(xiàng)目了。
這里拉取的項(xiàng)目是和遠(yuǎn)程倉(cāng)庫(kù)關(guān)聯(lián)的，我們需要將其刪掉（由于我們項(xiàng)目是svn管理，所以直接把.git文件夾刪掉，如果使用git的話(huà)，可以git init初始化即可），清理掉一些多余文件：
- // commands/init.js
- // 5. 清理文件
- const deleteDir = ['.git', '.gitignore', 'README.md', 'docs']; // 需要清理的文件
- const pwd = shell.pwd();
- deleteDir.map(item => shell.rm('-rf', pwd + `/${name}/${item}`));
來(lái)點(diǎn)個(gè)性化
在上述過(guò)程中，我們實(shí)現(xiàn)了一個(gè)腳手架的基本功能，大致分為三個(gè)流程（拉取模板->創(chuàng)建項(xiàng)目->收尾清理），也解決了上面我項(xiàng)目中遇到的第一個(gè)問(wèn)題。接下來(lái)，我們就來(lái)看下第二個(gè)問(wèn)題如何解決。
解決的思路就是在創(chuàng)建項(xiàng)目的時(shí)候，就通過(guò)命令行強(qiáng)制要求開(kāi)發(fā)人員輸入對(duì)應(yīng)的配置，然后自動(dòng)寫(xiě)入配置文件，這樣就可以有效避免忘記填寫(xiě)的尷尬。當(dāng)然通過(guò)這種方式也可以實(shí)現(xiàn)根據(jù)用戶(hù)的輸入來(lái)動(dòng)態(tài)初始化項(xiàng)目，達(dá)到個(gè)性化的目的。
這里我們直接使用現(xiàn)成的輪子inquirer就可以搞定，效果和VueCli創(chuàng)建項(xiàng)目一樣，支持很多類(lèi)型，比較強(qiáng)大，也比較簡(jiǎn)單，具體用法看官方文檔就可以了。這里我直接上代碼，在第4步（下載模板）前面增加如下：
- // init.js
- const inquirer = require('inquirer');
- // 定義需要詢(xún)問(wèn)的問(wèn)題
- const questions = [
- {
- type: 'input',
- message: '請(qǐng)輸入模板名稱(chēng):',
- name: 'name',
- validate(val) {
- if (!val) return '模板名稱(chēng)不能為空！';
- if (val.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) return '模板名稱(chēng)包含非法字符，請(qǐng)重新輸入';
- return true;
- }
- },
- {
- type: 'input',
- message: '請(qǐng)輸入模板關(guān)鍵詞（;分割）:',
- name: 'keywords'
- },
- {
- type: 'input',
- message: '請(qǐng)輸入模板簡(jiǎn)介:',
- name: 'description'
- },
- {
- type: 'list',
- message: '請(qǐng)選擇模板類(lèi)型:',
- choices: ['響應(yīng)式', '桌面端', '移動(dòng)端'],
- name: 'type'
- },
- {
- type: 'list',
- message: '請(qǐng)選擇模板分類(lèi):',
- choices: ['整站', '單頁(yè)', '專(zhuān)題'],
- name: 'category'
- },
- {
- type: 'input',
- message: '請(qǐng)輸入模板風(fēng)格:',
- name: 'style'
- },
- {
- type: 'input',
- message: '請(qǐng)輸入模板色系:',
- name: 'color'
- },
- {
- type: 'input',
- message: '請(qǐng)輸入您的名字:',
- name: 'author'
- }
- ];
- // 通過(guò)inquirer獲取到用戶(hù)輸入的內(nèi)容
- const answers = await inquirer.prompt(questions);
- // 將用戶(hù)的配置打印，確認(rèn)一下是否正確
- console.log('------------------------');
- console.log(answers);
- let confirm = await inquirer.prompt([
- {
- type: 'confirm',
- message: '確認(rèn)創(chuàng)建？',
- default: 'Y',
- name: 'isConfirm'
- }
- ]);
- if (!confirm.isConfirm) return false;
獲取到用戶(hù)輸入的配置以后，就可以寫(xiě)入配置文件或者做個(gè)性化的處理了，這個(gè)太簡(jiǎn)單，我這里就不贅述了。
錦上添花
到這里，一個(gè)完全滿(mǎn)足需求的腳手架就完成了，但是作為一個(gè)有追求的程序員，我們可以在界面和易用性上面再做點(diǎn)什么：
- 為異步操作加上loding動(dòng)畫(huà)，可以直接使用ora
- const installSpinner = ora('正在安裝依賴(lài)...').start();
- if (shell.exec('npm install').code !== 0) {
- console.log(symbols.warning, chalk.yellow('自動(dòng)安裝失敗，請(qǐng)手動(dòng)安裝！'));
- installSpinner.fail(); // 安裝失敗
- shell.exit(1);
- }
- installSpinner.succeed(chalk.green('依賴(lài)安裝成功！'));
- 在操作成功或者失敗給出圖標(biāo)提示，使用log-symbols
- 可以給文字加點(diǎn)顏色，同理用現(xiàn)成的輪子Chalk
- 在安裝依賴(lài)或者其他耗時(shí)比較長(zhǎng)的時(shí)候，用戶(hù)可能會(huì)把終端切到后臺(tái)，這時(shí)我們的操作完成后可以使用node-notifier發(fā)出系統(tǒng)通知給予用戶(hù)提示。
- notifier.notify({
- title: 'YNCMS-template-cli',
- icon: path.join(__dirname, 'coulson.png'),
- message: ' ♪(＾∀＾●)ﾉ 恭喜，項(xiàng)目創(chuàng)建成功！'
- });
- 在創(chuàng)建項(xiàng)目的時(shí)候，我們可能會(huì)需要執(zhí)行一些shell命令，可以使用shelljs來(lái)完成，例如我們要在項(xiàng)目創(chuàng)建結(jié)束后打開(kāi)vscode并退出終端
- // 8. 打開(kāi)編輯器
- if (shell.which('code')) shell.exec('code ./');
- shell.exit(1);
結(jié)語(yǔ)
到這里，會(huì)發(fā)現(xiàn)開(kāi)發(fā)一個(gè)腳手架其實(shí)很簡(jiǎn)單，都是使用現(xiàn)成的輪子就可以搞定，不曉得哪位大牛說(shuō)過(guò)玩NodeJS就是玩輪子。
除了上述方法，我們也可以直接通過(guò)大名鼎鼎的Yeoman來(lái)創(chuàng)建，不過(guò)個(gè)人覺(jué)得沒(méi)必要，畢竟這玩意也不難。
一個(gè)好的腳手架應(yīng)該是能夠解決工作中遇到的問(wèn)題，提高開(kāi)發(fā)效率的。
