前言

腳手架的作用

• 減少重複性的工作，不需要複製其他項目再刪除無關代碼，或者從零創建一個項目和文件。
• 可以根據交互動態生成項目結構和配置文件。
• 多人協作更為方便，不需要把文件傳來傳去。

本文項目完整代碼請戳https://github.com/xiumubai/xiumu-cli

實現功能

• xiumu init <projectName>根據遠程模板，初始化一個項目（vue、react）
• xiumu --version 查看當前版本號
• xiumu -h 幫助命令

第三方庫

項目初始化

創建一個空項目(xiumu-cli)，使用 npm init 進行初始化。

安裝依賴

yarn add commander inquirer download-git-repo

添加bin命令

在package.json文件中添加

{
  "bin": {
    "xiumu": "./index.js"
  },
}

這樣我們就可以使用xiumu這個命令了。

在index.js文件頭部中添加#!/usr/bin/env node用來指定運行環境。

添加command命令

接下來需要添加init命令，這樣就可以使用xiumu init <projectName>進行項目的初始化。

commander是 node.js 命令行解決方案。可以使用它進行命令交互。

index.js

#!/usr/bin/env node

const { Command } = require('commander');
const program = new Command();

class Init {
  start() {
    program
      .version(require('./package.json').version)
      .option('-v, --version', '查看當前版本');

    program
      .command('init <projectName>')
      .description('create a new project')
      .action((projectName, options) => {
        console.log('projectName': projectName)
      });
    program.parse(process.argv);
  }
}

new Init().start();

運行node index.js init test，在日誌中得到

projectName: test

這説明已經拿到了初始化的test目錄名字，初始化完成的項目會放在test目錄下。

添加模板選擇

接下來需要選擇模板選擇，現在提供的模板有vue和react兩個。

代碼地址：react、vue。

添加inquirer命令交互，可以供用户選擇。

#!/usr/bin/env node

const { Command } = require('commander');
const inquirer = require('inquirer');
const program = new Command();

class Init {
  start() {
    program
      .version(require('./package.json').version)
      .option('-v, --version', '查看當前版本');

    program
      .command('init <projectName>')
      .description('create a new project')
      .action((projectName, options) => {
        console.log(projectName, options)
        inquirer
          .prompt([
            {
              type: 'list',
              name: 'template',
              message: 'please select frame type',
              choices: ['Vue', 'React']
            }
          ])
          .then((answer) => {
            console.log(answer.template)
          })
      });
    program.parse(process.argv);
  }
}

new Init().start();

如果選擇的是Vue，這裏的日誌打印為Vue，反之就是React,也就意味着我們可以拿到不同的值去選擇不同的模板。接下來就是需要從git上拉取不同的模板代碼，clone到本地就可以了。

添加模板下載

模板添加需要使用download-git-repo，具體用法參考官網。

#!/usr/bin/env node

const { Command } = require('commander');
const fs = require('fs');
const inquirer = require('inquirer');
const ora = require('ora')
const downloadGit  = require('download-git-repo');
const program = new Command();

class Init {
  start() {
    program
      .version(require('./package.json').version)
      .option('-v, --version', '查看當前版本');

    program
      .command('init <projectName>')
      .description('create a new project')
      .action((projectName, options) => {
        console.log(projectName)
        inquirer
          .prompt([
            {
              type: 'list',
              name: 'template',
              message: 'please select frame type',
              choices: ['Vue', 'React']
            }
          ])
          .then((answer) => {
            console.log(answer.tempalate);
            const spinner = ora('downloading template ...');
            spinner.start();
            const template = answer.template === 'Vue' ? 'vue-template' : 'react-template';
            const api = `github:xiumubai/cli-template-store#${template}`;
            downloadGit(api, projectName, (err) =>{
              if (err) {
                spinner.fail('模板下載失敗')
              } else {
                spinner.succeed('模板下載成功')
              }
            })
          })
      });
    program.parse(process.argv);
  }
}

new Init().start();

這裏我們根據選擇的不同模板，選擇了不同的分支，然後進行了拼接，api為完成的代碼地址。

現在整個流程就完成跑通了，一個最簡單的cli腳手架工具就已經寫完了。運行命令node index.js init test,然後選擇模板，靜靜等待模板下載。

發佈至npm

沒有註冊賬號的可以先去npm官網註冊一個賬號。註冊成功以後就可以在本地進行登錄了。

登錄

npm login 輸入賬户名、密碼、郵箱、郵箱驗證碼就可以登錄成功。

發佈包

npm publish --access=public //如果是公開包這樣發佈，如果不是公開的包則去掉--access=public即可

發佈成功以後，皆可以在本地使用了。

安裝使用

安裝

yarn add @xiumu/cli -g

創建項目

xiumu init <projectName>

輸入項目名字，選擇對應的vue或者react模板

寫在最後

相信到這裏，你已經學會了如何去寫一個最基本的腳手架。那麼就動起手來，親自去實踐一遍，你的理解就會更深刻。

這裏還有很多要做的額外工作，比如創建項目的時候判斷當前的項目是不是已經存在，package.json文件裏的name,author等的初始化等。

我是朽木白，一個熱愛分享的程序猿。如果覺得本文還不錯，記得三連+關注，説不定哪天就用得上！您的鼓勵是我堅持下去的最大動力❤️。