使用 webpack 构建应用程序时如何更改 NODE_ENV？

Question

我有一个包含NODE_ENV 变量的.env 文件。默认情况下，它设置为development。使用 webpack 构建 React 应用程序时，我启动命令 yarn build:

"scripts": {
    "start": "NODE_ENV=development webpack serve --open --hot",
    "build": "NODE_ENV=production && webpack",
    }

.env文件是：

NODE_ENV = "development"

但是在我的 webpack 配置文件中记录 NODE_ENV 值时，我可以看到它仍在 development 中。构建也没有缩小。但是当我在.env 文件中写入production 时，一切正常。

webpack 配置为：

/* eslint-env node */
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const Dotenv = require("dotenv-webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const isProductionMode = (mode) => mode === "production";

module.exports = () => {
  const env = require("dotenv").config({ path: __dirname + "/.env" });
  const nodeEnv = env.parsed.NODE_ENV;
  console.log("???????????? isProduction", isProductionMode(nodeEnv)) // output: false
  return {
    mode: nodeEnv,
    entry: "./src/index.tsx",
    output: {
      path: path.join(__dirname, "./dist"),
      filename: "[name].[contenthash].bundle.js",
      publicPath: "/",
      clean: true,
    },
    resolve: {
      extensions: [".ts", ".tsx", ".js", "jsx", ".json"],
      alias: {
        api: path.resolve(__dirname, "src/api/"),
        assets: path.resolve(__dirname, "src/assets/"),
        components: path.resolve(__dirname, "src/components/"),
        containers: path.resolve(__dirname, "src/containers/"),
        data: path.resolve(__dirname, "src/data/"),
        i18n: path.resolve(__dirname, "src/i18n/"),
        models: path.resolve(__dirname, "src/models/"),
        pages: path.resolve(__dirname, "src/pages/"),
        routes: path.resolve(__dirname, "src/routes/"),
        src: path.resolve(__dirname, "src/"),
        stores: path.resolve(__dirname, "src/stores/"),
        utils: path.resolve(__dirname, "src/utils/"),
      },
    },
    module: {
      rules: [
        {
          test: /\.(ts|js)x?$/,
          exclude: /node_modules/,
          use: { loader: "babel-loader" },
        },
        { test: /\.css$/, use: ["style-loader", "css-loader"] },
        { test: /\.(png|jpg|jpeg|woff2)$/, use: ["file-loader"] },
        {
          test: /\.svg$/,
          use: [
            { loader: "babel-loader" },
            {
              loader: "react-svg-loader",
              options: {
                jsx: true,
              },
            },
          ],
        },
      ],
    },
    devServer: {
      historyApiFallback: true,
      port: 3000,
      inline: true,
      hot: true,
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./src/index.html",
        favicon: "./src/assets/images/favicon.png",
      }),
      new Dotenv(),
    ],
    optimization: {
      minimize: isProductionMode(nodeEnv),
      minimizer: isProductionMode(nodeEnv)
               ? [new TerserPlugin(), new CssMinimizerPlugin()]
               : [],
      splitChunks: {
        chunks: "all",
      },
    },
  };
};

因此问题是：如何确保在启动构建时可以更改我的NODE_ENV？

另外，一旦 dist 文件夹上传到 Netlify 或类似的托管平台，我应该在 package.json 中编写什么命令来启动构建？

谢谢！

Answer 1

如果您想考虑通过命令行传递的环境变量，请尝试检查 process.env.NODE_ENV 而不是 env.parsed.NODE_ENV。这些将作为process.env 上的属性公开 - 并将优先于从 .env 文件加载的变量 - 但不会在require("dotenv").config() 返回的对象的parsed 属性上。这两个对象实际上并没有保持同步。

你可以试试这个简单的节点程序：

process.env.NODE_ENV = "production"   // simulate command line environment variable
var env = require("dotenv").config()

console.log(process.env.NODE_ENV)     // output: "production"
console.log(env.parsed.NODE_ENV)      // output: "development"

// .env
NODE_ENV=development

编辑：只是为了完成，只需确保您使用适合您操作系统的语法在命令行上设置环境变量，或为此目的使用与操作系统无关的cross-env 包。

// package.json
"scripts": {
  "build:dev": "webpack",
  "build:prod": "cross-env NODE_ENV=production webpack"
},

// .env
NODE_ENV=development

// webpack.config.js
const dotenv = require("dotenv")

dotenv.config()
console.log(process.env.NODE_ENV)

process.exit(0)

// console output
npm run build:dev      // "development"
npm run build:prod     // "production"

否则，正如我在下面的评论中指出的那样，您可以使用 --node-env 标志通过 webpack CLI 设置 NODE_ENV 环境变量。

"build:prod": "webpack --node-env=production"