如何让自定义命令行参数绕过yarn和webpack-dev-server传递？

嘿，我之前开发Electron CLI工具时也碰到过类似的参数传递坑——默认情况下npm会把你加的自定义参数当成自己的命令参数，根本传不到Electron或者webpack-dev-server里。结合你的场景（用的是webpack-dev-server v2.4.5），给你几个实用的解决步骤：

1. 先改npm脚本，给参数开个“通道” #

首先得在你的npm dev脚本里加个--分隔符，它是npm的特殊标记，意思是“后面的参数全传给脚本里的执行命令，别自己吞了”。

比如原来的package.json里的dev脚本可能是这样：

"scripts": {
  "dev": "webpack-dev-server --config webpack.config.js"
}

改成这样：

"scripts": {
  "dev": "webpack-dev-server --config webpack.config.js --"
}

之后你运行npm run dev -- --your-arg=hello，--your-arg=hello就会被正确传递给webpack-dev-server了。

2. 在Electron主进程里捞到自定义参数 #

Electron的主进程可以通过process.argv拿到所有命令行参数，但要注意webpack-dev-server和Electron本身会带一堆无关参数，得过滤一下：

比如在你的main.js里加这段代码：

// 跳过前两个默认参数（Node路径和Electron主文件路径），只保留用户自定义的--开头的参数
const userCustomArgs = process.argv.slice(2).filter(arg => arg.startsWith('--'));

// 把参数解析成键值对方便用
const params = {};
userCustomArgs.forEach(arg => {
  const [key, val] = arg.replace('--', '').split('=');
  params[key] = val || true; // 没有值的参数（比如--debug）就设为true
});

// 现在就可以用params来做逻辑判断啦
if (params.debug) {
  console.log('开启调试模式');
}
console.log('用户传入的参数:', params);

3. 让webpack-dev-server把参数传给Electron #

如果你是用webpack-dev-server自动启动Electron的，得确保它把参数带过去。比如用electron-connect插件的话，可以在webpack.config.js里这么配：

const ElectronConnectPlugin = require('electron-connect').webpack;

module.exports = {
  // ...你的其他webpack配置
  plugins: [
    new ElectronConnectPlugin({
      // 把用户传入的自定义参数传给Electron
      args: process.argv.slice(2).filter(arg => arg.startsWith('--'))
    })
  ]
};

要是你是手动写脚本启动Electron，那直接在启动命令后面加上${process.argv.slice(2).join(' ')}就行。

针对webpack-dev-server v2.4.5的小提醒 #

这个版本比较老，有些新的参数传递特性可能不支持，所以用--分隔符是最稳妥的方式，别尝试太花哨的新方法，容易踩坑。测试的时候先跑个npm run dev -- --test=123，然后在主进程打印process.argv，看看参数是不是真的传进去了。

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