交互型命令行

在前人的基礎上，自定義交互腳本是一個很簡單的事情。

這裏介紹四個工具，分別做用在不一樣的領域：

• shelljs

  • 執行腳本程序

• inquirer

  • 命令行用戶交互界面

• chalk

  • 命令行日誌樣式
  • 可嵌套、可鏈式

• commander

  • 自定義命令行參數

// const spawn = require('child_process').spawn
// const { Command } = require('commander')
const shell = require('shelljs');
const inquirer = require('inquirer');
const chalk = require('chalk');
const scriptsConfig = require('../config/scripts')
const runModes = require('../config/modes')

// const program = new Command();
let curScriptEvent = process.env.npm_lifecycle_event;  // E.g.：'npm run serve'中的'serve'
let curScriptSource = process.env.npm_lifecycle_script;  // E.g.：'npm run serve: vue-cli-service serve'的'vue-cli-service serve'


const build = async () => {
  let res;
  try {
    // j、k或者數字鍵選擇
    res = await inquirer.prompt([
      {
        type: 'list',
        name: 'operation',
        message: '請選擇你要運行的命令：npm run',
        choices: ['serve', 'build', 'push', 'fds', 'test']
      },
      {
        type: 'list',
        name: 'mode',
        message: '請選擇你要執行的環境？',
        choices: ['dev', 'prev', 'pro']
      },
    ]);
  } catch(e) {
    if (e.isTryError) {
      console.log(chalk.red("Prompt couldn't be rendered in the current environment"))
    } else {
      console.log(chalk.red("Error：", e))
    }
  }
  const { operation, mode } = res;
  console.log(chalk.green(`正在執行操做npm run ${operation}---${mode}......`));
  curScriptEvent = `${operation}${mode ? (':' + mode) : ''}`
  curScriptSource = scriptsConfig[curScriptEvent]

  if (process.platform === 'win32') {
    shell.exec(`npx cross-env ${curScriptSource}`)
    // spawn('npx cross-env', [curScriptSource], {
    //   stdio: 'inherit',
    //   shell: true
    // })
  } else {
    shell.exec(`npm run ${curScriptEvent}`)
    // spawn('npm', ['run', curScriptEvent])
  }
}
build();

優化版：

const shell = require('shelljs');
// const spawn = require('child_process').spawn;
const inquirer = require('inquirer');
const chalk = require('chalk');
const { scripts, getRunModes } = require('../config/scripts')
const runModes = getRunModes(scripts)
const operationKeys = Object.keys(runModes)

let curScriptEvent = process.env.npm_lifecycle_event;  // E.g.：'npm run serve'中的'serve'
let curScriptSource = process.env.npm_lifecycle_script; // E.g.：'npm run serve: vue-cli-service serve'的'vue-cli-service serve'

const build = async () => {
  let operation, mode;
  try {
    // j、k或者數字鍵選擇
    const res = await inquirer.prompt({
      type: 'list',
      name: 'operation',
      message: '請選擇你要運行的命令：npm run',
      choices: operationKeys
    });
    operation = res.operation
  } catch(e) {
    if (e.isTryError) {
      console.log(chalk.red("Prompt couldn't be rendered in the current environment"))
    } else {
      console.log(chalk.red("Error：", e))
    }
  }
  try {
    // j、k或者數字鍵選擇
    const res = await inquirer.prompt({
      type: 'list',
      name: 'mode',
      message: '請選擇你要執行的環境？',
      choices: runModes[operation]
    });
    mode = res.mode
  } catch(e) {
    if (e.isTryError) {
      console.log(chalk.red("Prompt couldn't be rendered in the current environment"))
    } else {
      console.log(chalk.red("Error：", e))
    }
  }
  // const { operation, mode } = res;
  // const NODE_ENV = runModes[mode];
  curScriptEvent = `${operation}${mode ? (':' + mode) : ''}`
  curScriptSource = scripts[curScriptEvent]
  console.log(chalk.green(`正在執行${curScriptSource}......`));

  if (process.platform === 'win32') {
    // spawn('npx cross-env', [curScriptSource], {
    //   stdio: 'inherit',
    //   shell: true
    // })
    shell.exec(`npx cross-env ${curScriptSource}`)
  } else {
    shell.exec(curScriptSource)
    // spawn('npm', ['run', curScriptEvent], {
    //   stdio: 'inherit',
    //   shell: true
    // })
  }
}
build();