在 ElectronJS 中管理登台环境

ElectronJS是一个开源框架，用于使用能够在 Windows、macOS 和 Linux 操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台原生桌面应用程序。它将 Chromium 引擎和NodeJS 组合成一个单一的运行时。

在复杂或企业桌面应用程序中，开发人员需要不同的暂存环境来测试和部署应用程序。根据应用程序的范围，在应用程序最终提供给最终用户之前，会设置多个暂存环境来测试和检查应用程序。部署应用程序并向公众提供的最终暂存环境称为Production 。当应用程序开发完成或向应用程序添加新功能时，通常会将其部署在开发暂存环境中。在开发环境中，开发人员执行基本单元测试并查看应用程序的新功能。根据企业的不同，在应用程序最终进入生产阶段之前，还可能有其他几个暂存环境，例如QA(质量保证) 、沙盒、预生产等。每个暂存环境在应用程序生命周期中都有特定的用途。例如，在QA环境中，应用程序经过集成测试和回归测试。在预生产环境中，应用程序经过性能和负载测试。一旦应用程序通过所有这些步骤，它就可以最终部署在生产环境中，让观众可以使用它。这些临时环境的另一个优点是开发人员可以在应用程序中启用有用的实用程序和调试功能，而这些功能在生产阶段不应该是可见的。这有助于发现错误和评估应用程序的性能。

我们可以通过多种方式在 Electron 应用程序中启用这些暂存环境。我们已经知道 Electron 支持全局 NodeJS进程对象，它为我们提供了对环境变量的访问，特别是NODE_ENV 。我们可以通过进程对象的这个属性来定义登台环境。有关进程对象和NODE_ENV 的更多详细信息。

• 请参阅文章： ElectronJS 中的进程对象。
• 请参阅文章： ElectronJS 中的热重载。

定义暂存环境的另一种方法是使用环境变量，例如ELECTRON_ENV 。 Electron 支持许多环境变量，它们也分为生产和开发变量。有关环境变量的更多详细信息。

• 请参阅文章： ElectronJS 中的环境变量。

然而，问题是，并非所有操作系统平台都支持其中一些环境变量。因此，需要有一种方法可以区分适用于所有操作系统平台的不同暂存环境，并且不复杂或不需要更改配置。这可以通过使用electron-is-dev外部npm包来实现。我们将使用这个外部 npm 包来解释 Electron 应用程序中不同暂存环境之间的差异。

我们假设您熟悉上述链接中介绍的先决条件。为了让 Electron 正常工作，需要在系统中预装node和npm。

• 项目结构：

示例：按照 ElectronJS 中的动态样式中给出的步骤设置基本的 Electron 应用程序。复制文章中提供的main.js文件和index.html文件的样板代码。我们将继续使用相同的代码库构建我们的应用程序。此外，使用 npm安装 electron-is-dev 包。这个包的主要目的是简单地检测 Electron 应用程序是运行开发环境还是生产环境。有关 electron-is-dev 的更多信息，请参阅链接： https ://www.npmjs.com/package/electron-is-dev。

npm install electron-is-dev --save

此外，执行 package.json文件中提到的必要更改以启动电子应用程序。我们将继续使用相同的代码库构建我们的应用程序。设置 Electron 应用程序所需的基本步骤保持不变。
包.json：

{
  "name": "electron-stage",
  "version": "1.0.0",
  "description": "Manage Staging Environments in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0",
    "electron-is-dev": "^1.2.0"
  }
}

输出：

在 Electron 中管理暂存环境：如上所述，此包仅用于检查 Electron 是否在开发环境中运行。这对于添加调试和实用功能(例如日志记录、使代码通用等)非常有用。这个包可以直接在应用程序的主进程和渲染进程中使用。这个包需要 Electron 3+ 才能正常工作。在我们跳入代码之前，我们想对应用程序的 main.js 文件进行某些更改。
在main.js文件中，注释掉以下几行：

• 主要.js：

javascript

Open the DevTools.
win.webContents.openDevTools()

• index.js ：只有当应用程序在开发模式下运行时，我们才会从渲染器进程(即index.js文件)激活 Chrome DevTools。

javascript

const electron = require('electron');
// Importing BrowserWindow using Electron Remote 
const BrowserWindow = electron.remote.BrowserWindow;
  
const isDev = require('electron-is-dev');
let win = BrowserWindow.getFocusedWindow();
  
if (isDev) {
    console.log('Running in Development Environment');
    win.webContents.openDevTools();
} else {
    console.log('Running in Production Environment');
}

说明：默认情况下，应用程序在开发登台环境中启动。 electron-is-dev npm 包返回一个布尔值，说明应用程序是在开发模式还是生产模式下运行。默认情况下，返回的值为true 。在上面的代码中，我们仅在开发模式下使用BrowserWindow对象的webContents属性的实例方法 openDevTools()激活了 Chome DevTools。
输出：

这里出现的问题是，我们应该如何激活 Electron 应用程序中的生产暂存环境。 Electron-is-dev npm 包应返回false或undefined ，表明应用程序正在生产模式下运行，并且不应在应用程序启动时激活Chrome DevTools 窗口。我们可以使用 ELECTRON_IS_DEV环境变量在不同的环境之间切换。将此环境变量设置为1将切换开发模式，将此环境变量设置为任何其他值(例如0)将在生产模式下启动应用程序。要在生产模式下启动应用程序，请对 package.json文件启动脚本执行以下更改。
包.json：

{
  "name": "electron-stage",
  "version": "1.0.0",
  "description": "Manage Staging Environments in Electron",
  "main": "main.js",
  "scripts": {
    "start": "set ELECTRON_IS_DEV=0 && electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0",
    "electron-is-dev": "^1.2.0"
  }
}

说明：由于我们在Windows操作系统上，我们无法设置环境变量并从同一命令中启动应用程序。因此，我们需要首先设置ELECTRON_IS_DEV=0 ，然后启动 Electron 应用程序。

注意：如果此环境变量是从 Windows 控制台设置的，则将在重新启动系统时重置，如上例所示。
输出：