运行纱线时跨环境不改变环境变量答案

【问题标题】：Cross-env not changing env variable when running yarn运行纱线时跨环境不改变环境变量
【发布时间】：2021-04-26 21:40:14
【问题描述】：

我正在尝试设置环境，以便当我选择运行 prod 时它会运行 prod 设置，而当我选择运行 dev 时它会运行 dev 服务器，目前我的 package.json 脚本如下所示：

  "scripts": {
    "build:dev": "cross-env NODE_ENV=developement webpack",
    "build:prod": "cross-env NODE_ENV=production webpack",
    "start:dev": "cross-env NODE_ENV=developement webpack-dev-server ",
    "start:prod": "cross-env NODE_ENV=production webpack-dev-server "
  },

webpack 配置文件：

const webpack = require("webpack");
const path = require("path");
const dotenv = require("dotenv");

module.exports = {
  //Entry file for webpack.config
  entry: "./src/index.js",
  //Target specific use of project ie. nodejs project we use node value
  target: process.env.NODE_ENV === "dev" ? "node" : "web",
  //Dev server meant for hosting local server for developement
  devServer: {
    contentBase: path.resolve(__dirname, "public"),
    historyApiFallback: true,
    port: 8080,
  },
  //Modules are used to set rules to build specific file types
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/env", "@babel/react"],
              plugins: [
                "@babel/plugin-transform-runtime",
                "@babel/plugin-proposal-class-properties",
              ],
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      },
      {
        test: /\.(css|sass|scss)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 2,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "svg-inline-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    "jquery": "jQuery"
  },
  //Changes how modues are resolved
  resolve: {
    extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
  },
  //Output is setup to serve the bundle.js file to be served to web browser
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js",
    publicPath: "/",
  },
  //Prevent bundling of certain packages
  externals: {
    "react-native": true,
  },
  //A javascript object used to do various extra things for webpack
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(dotenv.config().parsed),
    }),
  ],
};

我愿意：

console.log(process.env.NODE_ENV)

在我的主页 jsx 中，但每次我运行它时，即使我执行 yarn start:prod it console.logs development 而不是生产，为什么当我运行它时，cross-env 没有成功地将 NODE_ENV 更改为生产？

【问题讨论】：

可以分享一下webpack的配置文件吗？
@tmhao2005 刚刚添加，抱歉耽搁了

标签： reactjs webpack

【解决方案1】：

为了将环境变量复制到webpack，您必须使用webpack. DefinePlugin，就像您在配置文件中所做的那样，看起来您正在尝试将所有内容复制到webpack中。

无论如何，如果你想使用来自cross-env 的值，你可以使用DefinePlugin 插件做同样的事情，但输入具体值NODE_ENV 如下：

webpack.config.js

{
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
  ],
}

【讨论】：