关于cli:交互型命令行

在前人的根底上，自定义交互脚本是一个很简略的事件。

这里介绍四个工具，别离作用在不同的畛域：

• 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();