最近集團(tuán)前端越來越多降盹，項(xiàng)目也是超級多与柑，每個(gè)前端技術(shù)能力參差不齊，用的腳手架也是各有不同蓄坏，維護(hù)起來很是不方便价捧，于是就想建立一個(gè)集團(tuán)或者所有人都能用的腳手架工具，統(tǒng)一管理涡戳，所以就需要?jiǎng)?chuàng)建集團(tuán)性質(zhì)的腳手架工具干旧；
// 如：
npm install guoshang -g
guoshang create progectname
功能需求：
1、創(chuàng)建全局包妹蔽，通過安裝的全局包管理創(chuàng)建項(xiàng)目，如：vue create progectname挠将；
2胳岂、參數(shù)可選，根據(jù)需求進(jìn)行配置舔稀，自動(dòng)安裝乳丰，如選擇vue，koa2 或 react内贮；
3产园、自動(dòng)執(zhí)行一些 shell 腳本汞斧，如 npm install;
思路：
1、配置 package.json 通過 npm link 生成本地測試環(huán)境什燕；
2粘勒、通過 Commander 插件生成基礎(chǔ)命令（vue也用的這個(gè)，是TJ大神搞的）屎即；
3庙睡、通過 download-git-repo 插件，下載模板（沒錯(cuò)技俐，vue也是用的這個(gè)）乘陪；
4、通過 inquire.js 實(shí)現(xiàn)命令行選擇配置雕擂，如 vue-cli 的配置選擇啡邑；
5、通過 child_process 模塊井赌，執(zhí)行 shell 腳本谤逼，如 npm install;
6、發(fā)布 npm 包族展；
總體上就是這個(gè)流程森缠，下面會(huì)一一分析具體的每一項(xiàng)細(xì)節(jié)，并配上代碼仪缸；
一贵涵、配置本地環(huán)境；
npm link 用來在本地項(xiàng)目和本地npm模塊之間建立連接
"bin": {
"guoshang": "index.js"
},
guoshang 就是想要設(shè)置的全局命令名字恰画，index.js 是入口文件
配置好后宾茂，執(zhí)行 npm link 這個(gè)過程可能會(huì)失敗，失敗了就手動(dòng)找到 npm 全局按轉(zhuǎn)包文件地址拴还，刪掉跨晴，從新搞就行，比如我的地址是 C:\Users\86182\AppData\Roaming\npm\node_modules
配置成功后 可以執(zhí)行 guoshang 會(huì)出現(xiàn)一些簡單的指令片林，接下來就開始配置自己的指令端盆；
二、利用 Commander 插件生成基礎(chǔ)命令费封；
安裝依賴
npm install commander --save
在Commander模塊下存在option方法用來定義commander的選項(xiàng)options焕妙，用來作為選項(xiàng)的文檔。原文地址：https://www.npmjs.com/package/commander
// 基礎(chǔ)使用
const program = require('commander');
program
.option('-g, --git [type]', 'Add [marble]', 'Angie')
.parse(process.argv);
console.log("process.argv",process.argv)
console.log("program.args",program.args)
三弓摘、利用 download-git-repo 下載模板焚鹊；
安裝依賴
npm install download-git-repo --save
原文地址：
https://www.npmjs.com/package/download-git-repo
const download = require('download-git-repo');
download('這個(gè)參數(shù)?', 'test/tmp', function (err) {
console.log(err ? 'Error' : 'Success')
})
四、inquire.js 實(shí)現(xiàn)命令行選擇配置韧献；
安裝依賴
npm install inquire.js --save
使用腳手架的時(shí)候最明顯的就是與命令行的交互末患，如果想自己做一個(gè)腳手架或者在某些時(shí)候要與用戶進(jìn)行交互研叫，這個(gè)時(shí)候就不得不提到inquirer.js
原文地址：https://www.npmjs.com/package/inquire
由于交互的問題種類不同，inquirer為每個(gè)問題提供很多參數(shù)：
type：表示提問的類型璧针，包括：input, confirm, list, rawlist, expand, checkbox, password, editor嚷炉；
name: 存儲(chǔ)當(dāng)前問題回答的變量；
message：問題的描述陈莽；
default：默認(rèn)值渤昌；
choices：列表選項(xiàng)，在某些type下可用走搁，并且包含一個(gè)分隔符(separator)独柑；
validate：對用戶的回答進(jìn)行校驗(yàn)；
filter：對用戶的回答進(jìn)行過濾處理私植，返回處理后的值忌栅；
transformer：對用戶回答的顯示效果進(jìn)行處理(如：修改回答的字體或背景顏色)，但不會(huì)影響最終的答案的內(nèi)容曲稼；
when：根據(jù)前面問題的回答索绪，判斷當(dāng)前問題是否需要被回答；
pageSize：修改某些type類型下的渲染行數(shù)贫悄；
prefix：修改message默認(rèn)前綴瑞驱；
suffix：修改message默認(rèn)后綴。
// 基礎(chǔ)語法
const promptList = [{
type: 'list',
message: '請選擇一種水果:',
name: 'fruit',
choices: [
"Apple",
"Pear",
"Banana"
],
filter: function (val) { // 使用filter將回答變?yōu)樾? return val.toLowerCase();
}
}];
const inquirer = require('inquirer');
const promptList = [
// 具體交互內(nèi)容
];
inquirer.prompt(promptList).then(answers => {
console.log(answers); // 返回的結(jié)果
})
五窄坦、child_process唤反；
child_process模塊是nodejs的一個(gè)子進(jìn)程模塊，可以用來創(chuàng)建一個(gè)子進(jìn)程鸭津，并執(zhí)行一些任務(wù)彤侍。執(zhí)行一些什么任務(wù)呢？shell命令知道吧逆趋，有了child_process模塊盏阶，就可以直接在js里面調(diào)用shell命令去完成一些非常酷炫的操作了Ｎ攀椤名斟！
舉個(gè)栗子，GitHub魄眉、碼云等git代碼托管網(wǎng)站砰盐，都會(huì)有個(gè)webHook功能，當(dāng)push了新的代碼后杆融，服務(wù)器可以開辟一個(gè)接口去接受這個(gè)webHook的請求，并進(jìn)行g(shù)it pull霜运、npm run build等命令脾歇，從而達(dá)到自動(dòng)化部署的目的蒋腮！
原文地址：http://nodejs.cn/api/child_process.html
這個(gè)模塊無需安裝，是node的基礎(chǔ)模塊
封裝：
const { spawn } = require('child_process');
const spawnCommand = (...args) => {
return new Promise((resole, reject) => {
const childProcess = spawn(...args);
childProcess.stdout.pipe(process.stdout);
childProcess.stderr.pipe(process.stderr);
childProcess.on('close', () => {
resole();
})
})
}
六藕各、發(fā)布模塊池摧；
1、去npm官網(wǎng)注冊賬號激况；
2作彤、命令行登錄賬號，npm login乌逐，然后輸入用戶名密碼和郵箱竭讳；
3、npm publish浙踢；
如果安裝中遇到問題绢慢，可以根據(jù)錯(cuò)誤碼來進(jìn)行修改，遇到問題可以網(wǎng)上搜一下或者給留言洛波；
希望這篇文檔能幫助到你
最后配上 我的全局包源碼地址 https://github.com/jianghaifei/gs-cli
