利用环境变量进行 Electron 运行时配置

介绍： Electron 是一个强大的打包工具，用于构建跨平台桌面应用程序，允许开发者在打包过程中利用环境变量的威力。然而，在运行时，Electron 无法直接访问 process.env。在本篇博文中，我们将探讨一种巧妙的解决方案，通过 Electron Builder 钩子来更新配置文件，从而使运行时能够使用环境变量。

配置 Electron Builder 钩子： 为了利用 Electron Builder 的打包生命周期，我们可以使用钩子，比如 'beforePack'。该钩子在 Electron 将文件打包成桌面应用程序之前执行，为操纵配置提供了便利的机会。让我们深入研究设置这一点所需的必要步骤。

Package.json 配置： 要开始使用 'beforePack' 钩子，请更新您的 package.json 文件，并进行必要的配置。以下是一个示例片段：

jsonCopy code
jsonCopy code
{
  "name": "someApp",
  "main": "main.js",
  "author": "SomeCompany- Conan Ding",
  "description": "an electron application",
  "version": "0.0.1",
  "scripts": {
    "electron-pack": "cross-env NODE_ENV=production electron-builder -c.extraMetadata.main=main.js",
  },
  "build": {
    "appId": "com.SomeCompany.someApp",
    "beforePack": "./before-pack.js"
  }
}

before-pack.js 实现： 在 'before-pack.js' 文件中，我们将创建或更新一个配置文件，Electron 在运行时可以使用。以下是一个示例实现：

jsxCopy code
jsxCopy code
const path = require("path");
const fs = require("fs");

exports.default = async function(context) {
    const targetFile = path.join(context.outDir, "./electron-runtime.config.json");

    if (!fs.existsSync(targetFile)) {
        fs.writeFileSync(targetFile, JSON.stringify({
            APP_URL: ''
        }, null, 2));
    }

    const parsedTarget = JSON.parse(fs.readFileSync(targetFile, "utf8"));
    const srcFile = path.join(__dirname, "./.env.production");
    const src = fs.readFileSync(srcFile, "utf8").split('\n');

    for (const item of src) {
        if (item.startsWith('#') || item.startsWith(' ') || item.startsWith('\n')) {
            continue;
        }

        const [key, value] = item.split('=');
        parsedTarget[key] = value;
    }

    fs.writeFileSync(targetFile, JSON.stringify(parsedTarget, null, 2));
}

main.js 中的运行时使用： 现在配置文件已经准备好，Electron 的 main.js 可以轻松访问环境变量。以下是一个示例片段：

jsxCopy code
jsxCopy code
const createWindow = () => {
  const win = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, "./preload.js"),
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: true,
    },
  });

  // ...

  const configFilePath = path.join(__dirname, './electron-runtime.config.json');
  const runtimeConfig = JSON.parse(fs.readFileSync(configFilePath, { encoding: "utf8" }));
  win.loadURL(runtimeConfig.APP_URL);
}

结论： 通过利用 Electron Builder 钩子，您可以无缝集成环境变量到 Electron 应用程序的运行时配置中。这种方法增强了您的 Electron 应用程序的灵活性和适应性，允许在不需要重新编译的情况下进行动态调整。