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

IT技术 javascript reactjs configuration webpack flux
2021-02-18 22:43:47

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

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

4个回答

随着的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'))
}

然后在你的module中，你可以使用配置：

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

对于react：

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

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

你们中的任何人是如何让这个工作的？我完全按照建议进行操作，并且收到与@amgohan 相同的“找不到module“配置”的消息。
2021-04-20 22:43:47
嗯，我还没有意识到需要解析 JSON 文件。因为externals需要对代码进行评估，所以您需要对 JSON 进行字符串化。
2021-04-22 22:43:47
如果我不希望 webpack 将单独的配置文件捆绑到 output.bundle.js 中怎么办？如果它与捆绑包分开，我是否仍然需要（'配置'）？谢谢
2021-04-24 22:43:47
别客气。顺便说一句，我们后来了解到最好使用 JSON 来避免语法错误。我已经相应地更新了代码。
2021-05-09 22:43:47
这对我不起作用，我收到此错误：[错误：使用 require('Config') 时找不到module 'Config']
2021-05-15 22:43:47

如果您使用 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
我有一个使用 React 模板创建的 ASP.NET Core 应用程序，我所做的只是在“ClientApp”文件夹下添加一个空文件并放入REACT_APP_MYSETTING=value其中，然后process.env.REACT_APP_MYSETTING在我的 JSX 代码中引用它，并且它工作正常。谢谢！
2021-04-16 22:43:47
请记住您的变量名必须以REACT_APP_
2021-04-17 22:43:47
将 .env 添加到根目录后，您将必须在 npm 上重新启动项目
2021-04-24 22:43:47
.env 在 create-react-app 项目中对我根本不起作用
2021-05-08 22:43:47
@Rob 重点不是它是一个秘密，而是它会因环境而变化。我有一个应用程序，它部署到全国四个数据中心的 1200 台服务器，每个数据中心最多部署 8 个集群，每个集群上都应用了本地 API 端点。你不想硬编码这样的东西......
2021-05-08 22:43:47

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

REACT_APP_SERVER_PORT=8000

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

process.env.REACT_APP_SERVER_PORT
虽然我认为你需要指定你的钥匙开始 REACT_APP_
2021-04-21 22:43:47

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

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

someKey=someValue
someOtherKey=someOtherValue

您可以通过名为properties-reader的 npm module将其导入 webpack

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

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

"properties-reader": "0.0.16"

  1. 将此module导入到 webpack.config.js 之上

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

  1. 读取属性文件

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

  1. 将此常量作为配置导入

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

  1. 按照已接受的答案中提到的相同方式使用它

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

关于 webpack.config.js 的第 2 步，如果使用的是 create-react-app，则没有 webpack 配置（或者它是隐藏的）。在这种情况下如何进行？
2021-05-03 22:43:47
其它你可能感兴趣的问题
上一篇按顺序运行 NPM 脚本 下一篇使用 AngularJS 的全局 Ajax 错误处理程序