process.env.NODE_ENV 在 webpack 4 中返回 undefined，服務器端

Question

在服務器代碼中，我有這個：

import express from "express";
const server = express();
import path from "path";
// const expressStaticGzip = require("express-static-gzip");
import expressStaticGzip from "express-static-gzip";
import webpack from "webpack";
import webpackHotServerMiddleware from "webpack-hot-server-middleware";

import configDevClient from "../../config/webpack.dev-client";
import configDevServer from "../../config/webpack.dev-server.js";
import configProdClient from "../../config/webpack.prod-client.js";
import configProdServer from "../../config/webpack.prod-server.js";

const isProd = process.env.NODE_ENV === "production";
const isDev = !isProd;
const PORT = process.env.PORT || 8000;
let isBuilt = false;

const done = () => {
  !isBuilt &&
    server.listen(PORT, () => {
      isBuilt = true;
      console.log(
        `Server listening on http://localhost:${PORT} in ${process.env.NODE_ENV}`
      );
    });
};

if (isDev) {
  const compiler = webpack([configDevClient, configDevServer]);

  const clientCompiler = compiler.compilers[0];
  const serverCompiler = compiler.compilers[1];

  const webpackDevMiddleware = require("webpack-dev-middleware")(
    compiler,

    configDevClient.devServer
  );

  const webpackHotMiddlware = require("webpack-hot-middleware")(
    clientCompiler,
    configDevClient.devServer
  );

  server.use(webpackDevMiddleware);
  server.use(webpackHotMiddlware);
  console.log("process.env.NODE_ENV",process.env.NODE_ENV);//RETURNS UNDEFINED
  server.use(webpackHotServerMiddleware(compiler));
  console.log("Middleware enabled");
  done();
} else {
  webpack([configProdClient, configProdServer]).run((err, stats) => {
    const clientStats = stats.toJson().children[0];
    const render = require("../../build/prod-server-bundle.js").default;
    server.use(
      expressStaticGzip("dist", {
        enableBrotli: true
      })
    );
    server.use(render({ clientStats }));
    done();
  });
}

我啟用了此插件的客戶端和服務器配置文件：

new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
        WEBPACK: true
      }

但這是輸出

process.env.NODE_ENV undefined
Server listening on http://localhost:8000 in undefined

在客戶端它正在工作，但表達端 process.env.NODE_ENV 返回未定義

Answer 1

假設你使用 Webpack-Dev-Server，你可以使用這個調用語法是正確的：

const dev = Boolean( process.env.WEBPACK_DEV_SERVER )

您將不再需要傳遞環境類型參數，因為我認為您在 package.json 中運行的腳本中傳遞參數

Answer 2

我正在寫我的經驗來幫助任何人解決這個問題，盡管我並沒有真正解決它。 我在服務器端項目中設置環境變量時遇到了同樣的問題。

顯然，在您設置環境變量后，它們在構建過程中是完全可以訪問的，這在構建工具中，如webpack config甚至.babelrc.js 。

但是在構建過程之后，環境變量被覆蓋，並且構建過程和覆蓋環境變量之間存在時間間隔。

我使用了許多webpack or babel plugins但在服務器端的構建過程之后，它們都無法保留環境變量，但它們立即在客戶端定義。 由於我使用的是ReactJs ，我嘗試將REACT_APP_添加到變量的開頭，但仍然沒有運氣。

我使用的其他一些插件： webpack dotenv 、 webpack.DefinePlugin 、 webpack.EnvironmentPlugin 、 babel-plugin-transform-define 、 babel-plugin-transform-inline-environment-variables

所以它讓我使用了在 DEPLOY 上而不是在 BUILD 過程中設置environment.js舊時尚方式。

以防有人不熟悉：您有一個主要environment.js和（在我的情況下）2 個其他文件，一個用於staging environment.staging.js ，另一個用於production environment.prod.js 。 在每次部署時，您將相關的js復制到environment.js （主環境文件），並且在您的代碼中，您始終讀取global CONSTs 、 baseUrl for APIs global CONSTs和 ...來自environment.js 。

希望它可以幫助那里的人。