Электрон main.js NODE_ENV недоступен

Question

Итак, я создаю приложение с:

• Реакция 16.4.0

• Электрон 2.0.2

• Webpack 4.11.0

Теперь я могу скомпилировать и запустить приложение с помощью веб-пакета (webpack dev server).Проблема в том, что я хочу показывать только инструменты разработчика Chrome в режиме разработки.Это то, чем я могу управлять из файла main.js Electron.Но проблема в том, что я не хочу делать это вручную.

Логично, что я хочу сделать это через переменную 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.

---

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 устанавливает внутренний 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 в моем приложении.Но я все еще не могу получить доступ к этой переменной в файле main.js Electron.

Почему это приводит к неопределенности и что я должен изменить?

Answer 1

Извините, но process.env.NODE_ENV - это переменная окружения.По моему мнению, это не должно устанавливаться каким-либо приложением.

Однако, если вы хотите настроить его для своего приложения, почему бы вам просто не добавить его в свой файл package.json (раздел "scripts")Например:

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

Информацию о том, как настроить NODE_ENV в вашей ОС, можно найти здесь: process.env.NODE_ENV не определено

Answer 2

Я не использую Webpack для моей конкретной сборки Electron, но я столкнулся с теми же проблемами.Я получил решение, которое использовало ipcMain и ipcRenderer модулей Electron для обхода .

Answer 3

Попробуйте прочитать от 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.