电子main.js NODE_ENV不可用

Question

所以我正在创建一个应用程序：

• 反应16.4.0

• 电子2.0.2

• Webpack 4.11.0

现在，我可以使用webpack（ webpack dev server ）编译并运行该应用程序了。 问题是我只想在开发模式下显示Chrome开发工具。 这是我可以从Electron的main.js文件管理的。 但是问题是我不想手动进行。

因此，从逻辑上讲，我想通过process.env.NODE_ENV变量执行此操作。 该变量由Webpack在webpack-config中设置。 问题是，当我尝试访问main.js文件中的变量时，得到的是undefined而不是“开发”或“生产”。

---

Webpack.common.js

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  resolve: {
    modules: [path.resolve(__dirname), 'node_modules']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ['env', 'react'],
          plugins: ['transform-runtime'],
          env: {
            production: {
              presets: ['react-optimize']
            }
          }
        }
      }
    ]
  }
};

Webpack.dev.js

const webpack = require("webpack");
const merge = require("webpack-merge");
const common = require("./webpack.common");
const path = require("path");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = merge(common, {
  mode: "development",
  entry: ["react-hot-loader/patch", path.join(__dirname, "src", "index.js")],
  devtool: "eval-source-map",
  plugins: [
    new BundleAnalyzerPlugin({ //Make bundle sizes visible
      analyzerMode: "static",
      openAnalyzer: false
    }),
    new webpack.HotModuleReplacementPlugin() // Enable hot module replacement
  ]
});

从Webpack V4 NODE_ENV必须通过mode参数设置NODE_ENV 。

---

Main.js

以下是该文件的抽象版本：

const isDevelopement = (process.env.NODE_ENV === "development");

console.log("Result: ", process.env.NODE_ENV); // Results in Undefined

function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // For security reasons
      devTools: isDevelopement
    }
  });
}

---

所以我错了。 Webpack mode仅在编译时设置iternal NODE_ENV。 它不更新全局NODE_ENV 。 因此，您仍然必须使用webpack.definePlugin ：

new webpack.DefinePlugin({ //Set the node env so that the project knows what to enable or disable
    'process.env': {
      'NODE_ENV': JSON.stringify('development')
    }
})

现在，我可以在应用程序中访问NODE_ENV变量。 但是我仍然无法在Electron的main.js文件中访问此变量。

为什么会导致未定义，我应该更改什么？

Answer 1

尝试通过process.env.WEBPACK_MODE读取mode 。

在您的情况下：

const isDevelopement = (process.env.WEBPACK_MODE === "development");

使用WebpackDefinePlugin的另一种解决方法：

const mode = process.env.NODE_END || 'development';

module.exports = merge(common, {
  mode: mode,
  plugins: [
    new webpack.DefinePlugin({
      'WEBPACK_MODE': JSON.stringify(mode),
    })
  ]
});

然后您应该可以通过process.env.WEBPACK_MODE访问它。

Answer 2

抱歉， process.env.NODE_ENV是环境变量。 我认为这不应由某些应用程序设置。

但是，如果要为应用程序设置它，为什么不将其添加到package.json文件（“脚本”部分），例如：

"start_vdev": "NODE_ENV=development electron index.js",
"start_vprod": "NODE_ENV=production electron index.js"

有关如何在操作系统中设置NODE_ENV的信息，请参见： process.env.NODE_ENV未定义

Answer 3

我没有将Webpack用于我的特定版本的Electron，但是确实遇到了相同的问题。 我结束了与使用电子的ipcMain和ipcRenderer模块的解决方案绕过它 。