javascript webpack中的环境变量

ahy6op9u 于 2023-10-14 发布在 Java

关注(0)|答案(1)|浏览(139)

当使用Create React App（内部使用webpack）时，我们可以在package.json的scripts部分指定环境变量，例如：

"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);

如何在一个不使用Create React 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中设置的环境变量（如上所示）。

JavaScript

来源：https://stackoverflow.com/questions/77280794/environment-variables-in-webpack

1条答案

按热度按时间

oknwwptz1#

这里有一个简单的例子，我总是如何使用它。正如你所看到的，我正在使用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

展开查看全部

赞(0）回复(0）举报 2023-10-14

我来回答

javascript webpack中的环境变量

1条答案

相关问题

热门标签

最新问答