webpack+reactjs如何使用环境变量？

Question

我正在使用 webpack 编译我的 Reactjs 文件。在我的项目中，我需要对后端进行 API 次调用。

现在我有 3 个环境，分别是本地环境、开发环境和生产环境。

所以我有一个 constants.jsx 文件，我在其中声明了以下内容：-

export const url= 'http://localhost:8002/api/v0';

所以在我的组件中，我从上面导入 url 并使用它们来调用 APIS，但是我需要如何根据它是本地的、dev 的还是 prod 来更改上面的变量。

如何实现以上内容？

Answer 1

所以我尝试了一些事情并通过执行以下操作解决了上述问题：

在 Webpack 配置中添加一个 DefinePlugin。以下是我的网络配置：

plugins: [
  new BundleTracker({filename: './webpack-stats.json'}),
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify(process.env.environment),
    }
  })
],

现在编译时我们使用以下命令：

environment=local webpack (for local)
environment=development webpack(for dev)
environment=production webpack(for prod)

现在，如果您看到我们使用 cli 输入设置 'NODE_ENV'，那么当 'NODE_ENV' 作为生产值时，webpack 会自动缩小您的输出包。

现在假设我们在文件中声明了 API url（我有 Constants.jsx），因此我们将以下内容添加到 constants.jsx。我们可以在此 Constants.jsx 中读取 webpack 配置中的 NODE_ENV 集，并将它们导入到您的组件中，从这里导出它来调用 APIS。

const api_url = function () {
  let api_url = '';
  if (process.env.NODE_ENV == 'local') {
    api_url = 'http://localhost:8002/api/v0';
  } else if (process.env.NODE_ENV == 'development') {
    api_url = 'https://development/api/v0';
  } else if (process.env.NODE_ENV == 'production') {
    api_url = 'https://production/api/v0';
  }
  return api_url;
}

export const url = api_url();

webpack+reactjs如何使用环境变量？

How to use environment variables with webpack+reactjs?

reactjs

webpack

react-jsx