Question

所以我用：

创建一个应用程序

React 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而不是'development'或'production'。

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。

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。 NOT 会更新全局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

尝试通过mode阅读process.env.WEBPACK_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

抱歉，270x270是一个环境变量。在我看来，这不应该由某些应用程序设置。

但是，如果您想为应用程序设置它，为什么不将它添加到package.json文件（＆＃34;脚本＆＃34;部分），例如：

process.env.NODE_ENV

有关如何在操作系统中设置NODE_ENV的信息，请访问：process.env.NODE_ENV is undefined

Answer 3

我没有为我的特定版本的Electron使用Webpack，但是我确实遇到了同样的问题。我最终得到了一个将Electron的 ipcMain 和 ipcRenderer 模块用于get around it的解决方案。

Electron main.js NODE_ENV不可用

3 个答案: