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

我是 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 中使用配置文件

Can anyone please guide me how can I achieve this ?

192107 次浏览
小开
最佳答案

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

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'))
}

然后在您的模块中，您可以使用配置:

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

反应:

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

不确定它是否涵盖了您的用例，但它一直为我们工作得很好。

小开

如果你使用创建应用程序，你可以使用. env 文件设置一个环境变量:

Https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

基本上在项目根目录的. env 文件中执行类似的操作。

REACT_APP_NOT_SECRET_CODE=abcdef

注意，变量名必须以 REACT _ APP _开头

可以从组件访问它

process.env.REACT_APP_NOT_SECRET_CODE
小开

无论使用什么设置，都可以使用 dotenv 包。它允许您创建一个。在项目根目录中指定 env，并像这样指定键

REACT_APP_SERVER_PORT=8000

在应用程序条目文件中，只需调用 dotenv () ; 然后像这样访问密钥

process.env.REACT_APP_SERVER_PORT
小开

以防您有一个. properties 文件或. ini 文件

实际上，如果您有任何文件具有如下键值对:

someKey=someValue
someOtherKey=someOtherValue

您可以通过名为 属性阅读器的 npm 模块将其导入到 webpack 中

我发现这非常有帮助，因为我正在与 JavaSpring 框架集成，其中已经有一个 application.properties 文件。这有助于我将所有配置放在一个地方。

  1. 从 package.json 中的依赖项部分导入它

"properties-reader": "0.0.16"

  1. 将这个模块导入最上面的 webpack.config.js

const PropertiesReader = require('properties-reader');

  1. 读取属性文件

const appProperties = PropertiesReader('Path/to/your/properties.file')._properties;

  1. 将此常数导入为 config

外观: { ‘ Config’: JSON.stringify (appProperties) }

  1. 按照公认答案中提到的方式使用它

Var Config = demand (‘ Config’) FetchData (Config.serverUrl +’/Enterprises/...’)

小开

我意识到这是一个老问题，并且想为这个问题的未来读者提供一个全新的配置包: Wj-config。

最近我试图弄清楚这个话题，因为我不喜欢 dotenv，因为它不能真正满足我的需要。成为一个。网络开发人员的大部分，我很熟悉。网络配置，并碰巧喜欢它，我真的希望这样的 JavaScript 世界。

我找不到任何东西，所以我创建了 Wj-config。它的工作原理很像。Net Configuration，适用于 NodeJS 和 ReactJS，可能还适用于其他浏览器库/框架。提醒一句: 它是以 ES 模块的形式编写的，因此它只能在相对较新的 NodeJS 版本和现代浏览器中使用。此外，它需要启用顶级等待，这在 React 中还没有启用，但是不用担心，因为项目的 ReadMe 将在3分钟内解释如何处理这个问题。

I also wrote a 博客文章 explaining its use.

这个包特别擅长配置 URL，如果您需要数百个已配置的 URL，那么 dotenv 的主要缺点就是。


提交答案