電子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模塊的解決方案繞過它 。