參考文檔

• Node.js 命令行程序開發教程
• download-git-repo包從遠程(GitHub, GitLab, Bitbucket)拉取文件到本地
• commander.js包 在命令行中顯示
• Ora 在控制臺顯示當前加載狀態的
• shelljs 模塊重新包裝了 child_process，調用系統命令
• yargs 獲取命令行參數
• chalk 控制控制臺輸出文字的顏色
• NodeJs交互式命令行工具inquirer

1、為什么要學習這個

看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獲取valuemessage: '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 = versionlet str = JSON.stringify(_data, null, 4);// 寫入文件fs.writeFile(`${process.cwd()}/${projectName}/package.json`, str, function (err) {if (err) throw err;})spinner.succeed();}); };

6、上代碼

github.com/zwfun/zw-cl…

7、使用姿勢

• 全局安裝npm i zw-vue-cli -g
• 在項目目錄下運行命令zwcli
• 根據提示輸入項目名稱和版本號和模板地址即可

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的通过交互式命令从github拉取项目模板并创建新项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。