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()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');
}- 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 控制台设置的，则将在重新启动系统时重置，如上例所示。
输出：
