如何在编译时设置 Electron 变量？

我正在使用 electro-builder 来打包 React 应用程序。我的应用程序使用 create-react-app 样板。

有没有一种方法可以在编译时设置变量，以便可以在运行时在主进程的代码内的条件中使用它......？

我正在寻找 C 预处理器宏的等效项。所以我可以做类似的事情：

electron-builder --extraConfig BUILD_TYPE=testing

然后在我的 main.js 中：

if (extraConfig.BUILD_TYPE === 'testing') { // do stuff }

我以前做过这个，但我正在使用electron-webpack除了您已经拥有的之外：

electron ^11.2.0
electron-builder ^22.9.1
electron-webpack ^2.8.2
webpack ^4

这个想法是通过公开一个变量webpack.DefinePlugin您可以对主进程和渲染器进程执行此操作。

With electron-webpack你可以提供一个webpack两个进程的配置：

// webpack.main.config.js
const webpack = require('webpack');
module.exports = {
  plugins: [ new webpack.DefinePlugin({__BURRITO__: true}) ]
};

// webpack.renderer.config.js
const webpack = require('webpack');
module.exports = {
  plugins: [ new webpack.DefinePlugin({__TACO__: true}) ]
};

这两个文件暴露于electron-webpack通过一些配置package.json:

{
  …
  "electronWebpack": {
    "main": {
      "webpackConfig": "webpack.main.config.js"
    },
    "renderer": {
      "webpackConfig": "webpack.renderer.config.js"
    }
  }
}

然后在你的主要流程中：

// src/main/index.js
const {app, BrowserWindow} = require('electron')

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({webPreferences: {nodeIntegration: true}});
  console.log(__BURRITO__ ? "????" : "????");
  mainWindow.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
});

两件事情：

1. The .loadURL有点看起来很有趣，但这只是因为我正在使用electron-webpack渲染器的默认 html 模板。在开发过程中，它是通过本地服务器提供服务的。

2. 您不需要启用nodeIntegration旗帜。那只是因为electron-webpack默认渲染器模板使用了一些require到处都有陈述。

如果您的渲染器进程包含一些脚本，他们将可以访问您的编译时也有变数。我再次利用electron-webpack默认模板需要src/renderer/index.js自动地：

// src/renderer/index.js
if (__TACO__) {
  document.body.innerHTML = "????"
}

当你通过运行这个electron-webpack dev然后你可以看到两件事：

1. 在主进程的输出中可以看到墨西哥卷饼
2. 在渲染器进程的 html 中可以看到 taco

这表明electron-webpack在编译时成功注入两个变量。