通過互動式命令從github拉取專案模板並建立新專案
摘要：
看vue-cli可以用互動式的命令來生成一個專案感覺很好玩，所以我也來學學如何做。
2、我要實現什麼功能
通過在命令列互動式輸入專案名、版本號、選擇模板地址後遠端(github/gitlab)拉取程式碼到本地並建立專案.
3、什麼都不懂，如何開始
搜尋到了一篇Node...
看vue-cli可以用互動式的命令來生成一個專案感覺很好玩，所以我也來學學如何做。
2、我要實現什麼功能
通過在命令列互動式輸入專案名、版本號、選擇模板地址後遠端(github/gitlab)拉取程式碼到本地並建立專案.
3、什麼都不懂，如何開始
搜尋到了一篇Node.js 命令列程式開發教程 ，瞬間就有了方向。
4、具體做什麼
- 像vue-cli那樣輸入命令 vue create hello-world就能開始執行互動程式。
- 互動式命令列
- 遠端拉取專案到本地
- 修改package.json檔案中的name和版本號
5、怎麼做
像vue-cli那樣輸入命令 vue create hello-world就能開始執行互動程式
從Node.js 命令列程式開發教程-可執行指令碼 中學到， 可以在package.json檔案中的bin下面設定命令，然後通過npm link就可將命令加入到環境變數中,像下面這樣配置 執行zwcli就會執行"bin/create-zw-template"指令碼。相當於執行node bin/create-zw-template(記得npm link, npm unlink是用來設定剛才的刪除環境變數的)
"bin": {
"zwcli": "bin/create-zw-template"
},
互動式命令列
使用NodeJs互動式命令列工具inquirer 來實現互動式命令。 - 首先編寫問題 - 獲取問答結果
const questions = [{
type: 'input', // type為答題的型別
name: 'projectName', // 本題的key，待會獲取answers時通過這個key獲取value
message: 'projectName：', // 提示語
validate (val) {
if(!val) { // 驗證一下輸入是否正確
return '請輸入檔名';
}
if(fs.existsSync(val)) { // 判斷檔案是否存在
return '檔案已存在';
}else {
return true;
};
}
},{
type: 'input',
name: 'version',
message: 'verson(1.0.0)：',
default: '1.0.0',
validate (val) {
return true;
}
},{
type: 'input',
name: 'repository',
message: 'repository(zwfun/zw-vue-cli)：',
default: 'zwfun/zw-vue-cli'
}];
inquirer
.prompt(questions)
.then(answers => {
// 獲取答案
const version = answers.version;
const projectName = answers.projectName;
const repository = answers.repository;
spinner.start();
spinner.color = 'green';
downloadTemplate({ repository, version, projectName });
});
獲取到答案後，就從遠端拉取程式碼下來
遠端拉取程式碼我們選用download-git-repo包從遠端(GitHub, GitLab, Bitbucket)拉取檔案到本地
為了更好的使用者體驗我們需要引入Ora 在控制檯顯示當前載入狀態的 ，來讓載入過程更直觀好像點
/**
* @description: 下載模板
* @param {type}
* @return:
*/
const downloadTemplate = function({ repository, version, projectName }) {
// repository模板地址projectName專案名稱 // clone 是否是克隆
download(repository, projectName, function (err) {
console.log(err ? '模板載入錯誤' : '模板載入結束');
if(err !== 'Error') {
editFile({ version, projectName });
}
})
};
拉取程式碼後，修改package.json檔案
使用node自帶的api就行
const editFile = function({ version, projectName }) {
// 讀取檔案
fs.readFile(`${process.cwd()}/${projectName}/package.json`, (err, data) => {
if (err) throw err;
// 獲取json資料並修改專案名稱和版本號
let _data = JSON.parse(data.toString())
_data.name = projectName
_data.version = version
let str = JSON.stringify(_data, null, 4);
// 寫入檔案
fs.writeFile(`${process.cwd()}/${projectName}/package.json`, str, function (err) {
if (err) throw err;
})
spinner.succeed();
});
};