背景

在我司的所有專案中，有一類增刪改查的頁面出現率都是極其高的，我想做一個簡單的腳手架來幫助大家能快速生成頁面，在其上面進行具體業務修改進而提高開發效率。

選用依賴

1. 開發命令列工具，TJ的"commander"是非常好的選擇

2. 日誌，選用"winston3.x"和"dayjs"配合

3. 模板，選用熟悉的"ejs"

4. "fs-extra"，檔案操作的封裝與擴充套件

5. "jest"，做一些簡單的測試

6. 其他，"eslint"語法檢查以及外掛，還有一些commit資訊檢查的支援

開始開發

大致目錄結構

這類工具，首先是配置好使用者的命令怎麼去輸入，那麼第一步則是bin檔案的開發：

// bin/index.js#!/usr/bin/env node'use strict';const program = require('commander');const packageJson = require('../package.json');const handle = require('../util/handle');
program
  .version(packageJson.version)
  .option('-c, --config ', 'required, the path of the JSON configuration')
  .option('-p, --path ', 'The path(include name) of the file you want to generate')
  .parse(process.argv);// 處理邏輯handle(program.config, program.path);

• bin檔案加上shebang頭，告訴系統使用nodejs執行這一段指令碼。

• 這裡是讓使用者採用argv的形式傳入引數執行檔案，“commander”預設會-h生成幫助，我們同時需要編寫每個option的幫助語句。這裡我是讓使用者傳入json配置路徑（相對執行命令目錄）與需要生成檔案路徑（相對執行命令目錄，可不寫，預設當前目錄）

• "commander"還支援其他命令，例如“command”模板語句加“command”的操作，具體文件我們可以在中看到。

• 然後我們在package.json加上下面這一段

{  "bin": {    "crud-init": "bin/index.js"
  }
 }

然後 我們就可以拿到引數開發業務邏輯了：

'use strict';const fs = require('fs');const fse = require('fs-extra');const path = require('path');const assert = require('assert');const log = require('./logger');const ejs = require('ejs');const exec = require('child_process').exec;/**
 * @param {string} configPath json配置路徑
 * @param {string} filePath 生成檔案路徑（相對執行命令目錄，包含檔名）
 */module.exports = (configPath, filePath) => {
  assert(configPath, '-c  or --config ,The JSON configuration path must exist');
  assert(!filePath || /.vue$/.test(filePath), '-p  or --path ,The path must end with .vue');  const startTime = Date.now();  const cPath = path.join(process.cwd(), configPath);  const fPath = path.join(process.cwd(), filePath || 'Unknown.vue');

  let config;  try {
    config = fse.readJsonSync(cPath);
  } catch (e) {
    assert.ifError(e);
  }  const tplPath = path.join(__dirname, '../template/Crud.ejs');  const str = ejs.render(fs.readFileSync(tplPath, 'utf-8'), config);  if (fse.pathExists(fPath)) {    // 檔案路徑存在則先刪除原檔案
    fse.removeSync(fPath);
  }  // 確保檔案被建立
  fse.ensureFileSync(fPath);
  fs.writeFileSync(fPath, str);
  log.info(`生成位置：${fPath}`);  const cmdStr = `${path.join(process.cwd(), 'node_modules/.bin/eslint')} --fix ${fPath}`;
  exec(cmdStr, err => {    if (err) {
      log.warn('eslint修復失敗，請檢查是否在根目錄執行命令以及eslint是否安裝');
    }
    log.info(`執行結束，用時${(Date.now() - startTime) / 1000}s`);
  });
};

• 這裡我採用的是ejs模板生成了檔案，然後執行當前工程的eslint進行修復。具體ejs模板怎麼寫在這就不貼出來了，大家如果還是做這個功能的話，按照自己實際情況去寫即可。

• 以下是日誌的簡單配置，只是為了好看，不用日誌工具用console也是可以的。

// util/logger.js'use strict';const { createLogger, format, transports } = require('winston');const { combine, colorize, timestamp, printf } = format;const day = require('dayjs');const myFormat = printf(info => {  return `${day(info.timestamp).format('YYYY-MM-DD HH:mm:ss:SSS')} ${info.level}: ${info.message}`;
});module.exports = createLogger({  level: 'info',  format: combine(
    colorize(),
    timestamp(),
    myFormat
  ),  transports: [ new transports.Console() ],
});

• 除錯的時候，使用 npm link 可以模擬全域性安裝，就能使用命令了。如果修改了package.json檔案，則需要重新執行npm link

• 寫了簡單的測試執行handle函式

作者：CaanDoll
連結：