如何配置yarn start执行后弹出选项选择待运行的React应用

实现步骤 #

• 安装命令行交互和跨平台进程执行依赖
  在项目根目录执行安装指令：
  yarn add -D inquirer cross-spawn

• 新建交互式选择脚本
  在项目根目录创建start-select.js文件，写入以下代码：

const inquirer = require('inquirer');
const spawn = require('cross-spawn');

const appOptions = [
  { name: 'App1 应用', value: 'app-1' },
  { name: 'App2 应用', value: 'app-2' }
];

inquirer.prompt([
  {
    type: 'list',
    name: 'targetApp',
    message: '请选择需要启动的应用：',
    choices: appOptions
  }
]).then(res => {
  const runArgs = [res.targetApp];
  const childProcess = spawn('yarn', runArgs, {
    stdio: 'inherit',
    cwd: process.cwd()
  });

  childProcess.on('close', exitCode => {
    process.exit(exitCode);
  });
});

• 配置package.json的start脚本
  打开根目录的package.json，修改scripts字段，新增start命令指向刚才写的脚本，原有app启动命令保持不变：

{
  "scripts": {
    "start": "node start-select.js",
    "app-1": "原app-1启动命令",
    "app-2": "原app-2启动命令"
  }
}

效果说明 #

配置完成后执行yarn start，不会再出现Command 'start' not found报错，终端会展示可选择的应用列表，支持键盘上下方向键切换选项，回车确认后会自动执行对应应用的原有启动逻辑，和手动输入yarn app-1/yarn app-2的运行效果完全一致。

适配说明 #

如果你的项目是ESM规范（package.json中声明了"type": "module"），可以把脚本文件后缀改为.mjs，将代码中的require写法替换为ES Module的import写法即可正常运行。

内容的提问来源于stack exchange，提问作者kburgie