如何在webpack reactjs中使用环境变量？

发布时间：2020-12-15 05:03:53 所属栏目：百科来源：网络整理

导读：我正在使用webpack编译我的Reactjs文件.在我的项目中,我需要对后端进行API调用. 现在我有3个环境,可以进行本地化,开发和生产. 所以我有一个constants.jsx文件,其中我声明了以下内容： – export const url= 'http://localhost:8002/api/v0'; 所以在我的组件

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

现在我有3个环境,可以进行本地化,开发和生产.

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

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

所以在我的组件中我从上面导入url并使用它们来调用APIS,但是我需要根据它是local,dev还是prod来改变上面的变量.

我如何实现上述？

所以我尝试了一些事情并通过以下方式解决了上述问题： –

在我们的webpack配置中添加一个DefinePlugin.以下是我的webconfig： –

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 config中设置的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();

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!