如何使用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中使用配置文件。

请问有人能指导我如何实现这一点吗？

- Dhaval Patel

---

你使用webpack或其他工具来编译js代码吗？ - Petr Bela

通常情况下，将该值作为环境变量发送、设置并读取，并将其作为全局值在JavaScript中可用于网页。然后，使用它来获取数据。 - WiredPrairie

@PetrBela：是的，我正在使用webpack来构建bundle.js，但我在谈论像.NET中的web.config这样的配置文件。 - Dhaval Patel

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/...')

React 的使用：

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

不确定它是否符合您的使用情况，但对我们来说一直运作得很好。

- Petr Bela

---

不客气。顺便说一下，我们后来发现使用JSON可以避免语法错误。我已经相应地更新了代码。 - Petr Bela

这对我不起作用，当我使用require('Config')时，我会收到错误消息：[Error: Cannot find module 'Config']。 - amgohan

请问您能否分享整个webpack.config文件或应用程序在github上的链接？谢谢。 - Barny

如果我不想让webpack将单独的配置文件打包到output.bundle.js中怎么办？如果它是与打包文件分开的，我是否仍然可以require('Config')来使用它？ - Barny

你们中的任何一个是如何使这个工作的？我按照建议完全操作，但我得到了“无法找到模块'Config'”的错误，与@amgohan一样。 - ceebreenk

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

- aris

---

请记住，你的变量名必须以REACT_APP_开头。 - Tomasz Madeyski

我有一个使用React模板创建的ASP.NET Core应用程序，我所做的一切就是在'ClientApp'文件夹下添加了一个空文件，并将REACT_APP_MYSETTING=value放入其中，然后在我的JSX代码中引用它作为process.env.REACT_APP_MYSETTING，然后它就可以工作了。谢谢！ - Neo

在create-react-app项目中，.env对我完全无效。 - user8620575

一旦在根目录下添加了.env文件，您将需要重新启动npm上的项目。 - foyss

这似乎是一种反模式。API端点不应该被定义在环境变量中作为秘密，它们是应用程序定义的一部分。 - Rob

@Rob，重点不在于它是一个秘密，而在于它会因环境而异。我有一个应用程序，在全国四个数据中心的1200台服务器上部署，每个数据中心最多有8个集群，并在每个集群上应用本地API端点。你不想像那样硬编码一些东西... - McGuireV10

Answer 3

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

REACT_APP_SERVER_PORT=8000

在您的应用程序入口文件中，只需在访问密钥之前调用dotenv();就可以了。

process.env.REACT_APP_SERVER_PORT

- Joshua Underwood

---

虽然我认为你需要指定以 REACT_APP_ 开头的键。 - HenryM

Answer 4

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

实际上，如果您有任何具有此类键值对的文件：

someKey=someValue
someOtherKey=someOtherValue

你可以通过一个名为 properties-reader 的npm模块将其导入到webpack中。

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

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

"properties-reader": "0.0.16"

2. 在webpack.config.js中导入此模块

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

3. 读取属性文件

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

4. 将此常量作为config导入

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

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

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

- Fangming

---

如果您正在使用create-react-app，那么关于webpack.config.js的第二步就不存在（或者该文件被隐藏了）。在这种情况下应该如何继续？ - joedotnot

Answer 5

虽然不完全是一个配置文件，但你也可以在package.json的启动脚本中添加环境变量。

之前：

  "scripts": {
    "start": "react-scripts start",
    ....
  },

之后：

  "scripts": {
    "start": "REACT_APP_TEST_ENV_VAR=TEST_DATA react-scripts start",
    ...
  },

现在您可以在React代码中使用process.env.REACT_APP_TEST_ENV_VAR来读取它们。

类似地，您也可以将该环境变量/配置参数移动到命令npm start的命令行中。

因此，在通过命令行启动React应用程序之前，请执行以下操作：

npm start

之后：REACT_APP_TEST_ENV_VAR=TEST_DATA npm start

- CAMD_3441