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

在客户端，它正在运行，但在快速过程中。env.NODE_ENV返回未定义

Answer 1

假设您使用的是Webpack-Dev-Server，则可以使用以下调用语法witch是正确的：

const dev = Boolean( process.env.WEBPACK_DEV_SERVER )

您将不再需要传递环境类型的参数，因为我认为您可以在运行在packages.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

因此，这使我使用了将老式environment.js设置为DEPLOY而不是BUILD流程的良好方式。

如果有人不熟悉：您有一个主要的environment.js和（在我的情况下）另外2个文件，一个用于staging environment.staging.js，另一个用于production { {1}}。在每次部署中，都将相关的environment.prod.js复制到主环境文件js中，并且在代码中，您总是从{读取environment.js，global CONSTs和... {1}}。

希望它可以帮助某个人。

process.env.NODE_ENV在Webpack 4服务器端返回未定义

2 个答案: