如何通过CLI启动Electron React应用并传递自定义启动参数？

解决方案 #

方式一：位置参数匹配原有参数逻辑 #

1. 更新package.json的scripts配置：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "electron:serve": "concurrently -k \"cross-env BROWSER=none PORT=${1:-3000} npm run start\" \"npm run electron:start -- $@\"",
  "electron:start": "wait-on tcp:${1:-3000} && electron . $@"
}

2. 启动命令格式：

npm run electron:serve -- <port> <pageToShow>

示例：

npm run electron:serve -- 3001 mainPage

3. 主进程参数获取保持你的原有代码即可：

const arg = process.argv;
const arguments = {
  port: arg[2],
  pageToShow: arg[3]
}

方式二：命名参数推荐更灵活 #

1. 更新package.json的scripts配置：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "electron:serve": "concurrently -k \"cross-env BROWSER=none PORT=${npm_config_port:-3000} npm run start\" \"npm run electron:start\"",
  "electron:start": "wait-on tcp:${npm_config_port:-3000} && electron . --port ${npm_config_port:-3000} --pageToShow ${npm_config_pageToShow:-home}"
}

2. 启动命令格式：

npm run electron:serve -- --port=<端口号> --pageToShow=<页面名称>

示例：

npm run electron:serve -- --port=3001 --pageToShow=mainPage

未指定参数时会使用默认值：端口3000、页面home。
3. 主进程参数解析适配命名参数：

const args = process.argv.slice(2);
const arguments = {
  port: '3000',
  pageToShow: 'home'
};

// 手动解析参数
for (let i = 0; i < args.length; i++) {
  if (args[i].startsWith('--port=')) {
    arguments.port = args[i].split('=')[1];
  } else if (args[i].startsWith('--pageToShow=')) {
    arguments.pageToShow = args[i].split('=')[1];
  }
}

如果想简化解析逻辑，可安装轻量库minimist：

npm install minimist --save

const minimist = require('minimist');
const args = minimist(process.argv.slice(2));
const arguments = {
  port: args.port || '3000',
  pageToShow: args.pageToShow || 'home'
};

核心注意事项 #

• npm传递参数必须加--分隔符，否则参数会被npm自身接收，无法传递到你的脚本。
• React启动端口和Electron等待端口必须同步，配置中通过环境变量/ npm配置变量实现了端口统一。
• ${变量名:-默认值}是跨平台兼容的shell语法，变量不存在时自动使用默认值。

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