如何存储配置文件并使用React读取

Question

我是React.js的新手，我实现了一个组件，在其中我从服务器获取数据并像这样使用它，

CallEnterprise:function(TenantId){


    fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) 
    {
        EnterprisePerspectiveActions.getEnterprise(enterprises);
    }).catch(function()
    {
        alert("There was some issue in API Call please contact Admin");
        //ComponentAppDispatcher.handleViewAction({
        //    actionType: MetaItemConstants.RECEIVE_ERROR,
        //    error: 'There was a problem getting the enterprises'
        //});
    });
},

我想将Url存储在配置文件中，所以当我将其部署在测试服务器或生产环境中时，我只需要更改配置文件中的url（而不是js文件中的URL），但是我不知道如何在react.js中使用配置文件

谁能指导我如何实现这一目标？

Answer 1

使用webpack，您可以将env特定的配置放入以下externals字段中webpack.config.js

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {
    serverUrl: "https://myserver.com"
  } : {
    serverUrl: "http://localhost:8090"
  })
}

如果要将配置存储在单独的JSON文件中，也可以这样做，则可以要求该文件并分配给Config：

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))
}

然后在您的模块中，可以使用config：

var Config = require('Config')
fetchData(Config.serverUrl + '/Enterprises/...')

对于React：

import Config from 'Config';
axios.get(this.app_url, {
        'headers': Config.headers
        }).then(...);

不知道它是否涵盖了您的用例，但对于我们来说它一直工作得很好。