如何在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();