如何存储配置文件并使用 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 文件中，但我没有不知道如何在 react.js

中使用配置文件

任何人都可以指导我如何实现这一目标吗？

Answer 1

使用 webpack，您可以将特定于环境的配置放入 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(...);

不确定它是否涵盖您的用例，但它对我们来说效果很好。

Answer 2

如果您使用了 Create React App，您可以使用 .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

Answer 3

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

REACT_APP_SERVER_PORT=8000

在您的应用程序入口文件中，您只需调用 dotenv();在像这样访问密钥之前

process.env.REACT_APP_SERVER_PORT

Answer 4

如果您有 .properties 文件或 .ini 文件

实际上，如果您有任何包含这样的键值对的文件：

someKey=someValue
someOtherKey=someOtherValue

您可以通过名为 properties-reader

的 npm 模块将其导入 webpack

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

从 package.json

"properties-reader": "0.0.16"

将此模块导入顶部的 webpack.config.js

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

读取属性文件

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

将此常量导入为配置

externals: { 'Config': JSON.stringify(appProperties) }

按照接受的答案中提到的方式使用它

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

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

How to store Configuration file and read it using React

javascript

configuration

flux

reactjs

webpack

如果您有 .properties 文件或 .ini 文件