前端腳手架(cli)實現

背景

 整合前端團隊代碼規範， 以及統一整體架構

使用庫

• 本文借鑑vue-cli思路，用到的庫有：

  • commander.js，可以自動的解析命令和參數，用於處理用戶輸入的命令。
  • download-git-repo，下載並提取 git 倉庫，用於下載項目模板。
  • inquirer.js，通用的命令行用戶界面集合，用於和用戶進行交互。
  • handlebars.js，模板引擎，將用戶提交的信息動態填充到文件中。
  • ora，下載過程久的話，可以用於顯示下載中的動畫效果。
  • chalk，可以給終端的字體加上顏色。
  • log-symbols，可以在終端上顯示出 √ 或 × 等的圖標。

代碼實現

• 下載依賴

npm init -y
npm i commander download-git-repo inquirer handlebars ora chalk log-symbols -S

• package.json

{
     "name": "lcq-cli",
     "version": "1.0.0",
     "description": "lcq-cli",
     "bin": {
      "lcq": "index.js"
     },
     ...
}

• index.js

const fs = require('fs');
const program = require('commander');
const download = require('download-git-repo');
const handlebars = require('handlebars');
const inquirer = require('inquirer');
const ora = require('ora');
const chalk = require('chalk');
const symbols = require('log-symbols');
 
program.version('1.0.0', '-v, --version')
  .command('init <name>')
  .action((name) => {
    if(!fs.existsSync(name)){
      inquirer.prompt([
        {
          name: 'description',
          message: '請輸入項目描述'
        },
        {
          name: 'author',
          message: '請輸入作者名稱'
        }
      ]).then((answers) => {
        const spinner = ora('download...');
        spinner.start();
        download('https://github.com:bear-new/latest-webpack-cli#master', name, {clone: true}, (err) => {
          if(err){
            spinner.fail();
            console.log(chalk.red(err));
          }else{
            spinner.succeed();
            const fileName = `${name}/package.json`;
            const meta = {
              name,
              description: answers.description,
              author: answers.author
            }
            if(fs.existsSync(fileName)){
              const content = fs.readFileSync(fileName).toString();
              const result = handlebars.compile(content)(meta);
              fs.writeFileSync(fileName, result);
            }
            console.log(chalk.green('success'));
          }
        })
      })
    }else{
      console.log(symbols.error, chalk.red('項目已存在'));
    }
  })
program.parse(process.argv);

• 執行

node ./index.js init demo