通過互動式命令從github拉取專案模板並建立新專案

awsky發表於2019-04-06
Github

參考文件

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獲取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();
    });
};

6、上程式碼

github.com/zwfun/zw-cl…

7、使用姿勢

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

相關文章