在使用Create Reaction App(内部使用webpack)时,我们可以在package.json的脚本部分指定环境变量,例如:

  "scripts": {
    "build:a": "REACT_APP_ENV=version-a react-scripts --openssl-legacy-provider build",
    "build:b": "REACT_APP_ENV=version-b react-scripts --openssl-legacy-provider build"
  },

然后可以在运行时使用这些环境变量,如下所示:

// Logs "version-a" or "version-b", depending on which script was used to build the app
console.log(process.env.REACT_APP_ENV); 

如何在not个使用Create Reaction App的项目中实现相同的功能?


以下是我的版本:

  "scripts": {
    "serve:production": "REACT_APP_ENV=version-a && webpack --config ./bundler/webpack.prod.js && serve ./dist -l 4000",
  },

我运行的是MacOS操作系统.Zsh和bash我都试过了.我使用的是webpack(v5.88.2).记录process.env.REACT_APP_ENV的结果始终为undefined.

我在.env个文件中设置的环境变量工作得很好;为此我使用dotenv-webpack插件.问题具体存在于package.json中设置的环境变量(如上所示).

推荐答案

这里有一个简单的例子,说明我是如何使用它的.如你所见,我使用的是插件dotenv-webpack.

const path = require('path');
const Dotenv = require('dotenv-webpack');

const filename = process.env.NODE_ENV === 'development' ? '' : `.${process.env.NODE_ENV}`;

module.exports = {
  target: 'node',
  mode: 'none',
  plugins: [
    new Dotenv({
      path: `./src/environments/environment${filename}.env`,
    }),
  ],
  entry: {
    app: ['./src/index.js'],
  },
  output: {
    path: `${__dirname}/dist`,
    filename: 'src/index.min.js',
  },
};

我的环境文件是:

  • /src/environments/environment.development.env
  • /src/environments/environment.production.env

下面是我的Package.json脚本部分:

  "scripts": {
    "start": "cross-env NODE_ENV=development nodemon ./src/index.js --config nodemon.json",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  },

为了使用环境变量NODE_ENV,我使用的是包cross-env,所以我可以在Linux和Windows上使用它吗:


否则,下面的文章可能会对你有所帮助:How to set NODE_ENV to production/development in OS X

Javascript相关问答推荐

如何在pixi js中画一条简单的线

为什么它无法识别日期 Select 器上的任何 Select ?

橡皮擦完全让画布变成白色

如何在不分配整个数组的情况下修改包含数组的行为主体?

没有输出到带有chrome.Devtools扩展的控制台

如何将连续的十六进制字符串拆分为以空间分隔的十六进制块,每个十六进制块包含32个二元组?

拖放仅通过 Select 上传

判断表格单元格中是否存在文本框

在我的html表单中的用户输入没有被传送到我的google表单中

在带有背景图像和圆形的div中添加长方体阴影时的重影线

如果Arrow函数返回函数,而不是为useEffect返回NULL,则会出现错误

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

TypeError:无法分解';React2.useContext(...)';的属性';basename';,因为它为空

Puppeteer上每页的useProxy返回的不是函数/构造函数

是否可以在Photoshop CC中zoom 路径项?

令牌JWT未过期

是否可以将Select()和Sample()与Mongoose结合使用?

不同表的条件API端点Reaction-redux

如何修复使用axios运行TSC index.ts时出现的错误?

如何更改Html元素S的 colored颜色 ,然后将其褪色为原始 colored颜色