如何在反应 jsx 中有一个外部 JSON 配置文件
Posted
技术标签:
【中文标题】如何在反应 jsx 中有一个外部 JSON 配置文件【英文标题】：How to have a external JSON config file in react jsx 【发布时间】：2018-07-04 05:33:03 【问题描述】：我想在基于 React 的项目中有一个外部配置文件 (JSON)。这是最终的结果，或者当我交付它（公共文件夹和 bundle.js）时，我的配置文件也应该给出。用户应该能够根据自己的意愿更改配置并使用我的应用程序。那是没有重新编译我的代码的人应该能够使用它。换句话说，配置文件不应该与我的应用程序捆绑在一起。
【问题讨论】：
你能举个例子吗？还有一个明确的问题？ 您可能只想通过 AJAX 获取它。 我正在创建一个反应应用程序。我需要一些 url 来访问一些资源，这些应该存储在 JSON 格式的外部配置文件中。部署我的应用程序后，可以更改它们（网址）。所以用户应该能够改变它们。它不应该重新编译我的代码。 【参考方案1】：这个问题有点模糊。我想我知道你在问什么。只要您打算使用 Webpack 或 Browserify，您就可以执行以下操作。它确实需要稍微不同的想法，而不是使用 JS 文件来掩盖它的纯 JSON 文件。
config.js：
let config =
option1: true,
option2: false
module.exports = config;
然后从您的文件中使用配置，您可以执行类似于以下的操作。
app.js：
import React from 'react';
import ReactDOM from 'react-dom';
import config from './my/relative/config/path/config';
import MyOtherComponent from './components/my_component';
let component = (<MyOtherComponent config=config />);
ReactDOM.render(component, document.querySelector('mount'));
【讨论】：
因为您将 config.js 文件导入 app.js，所以配置文件不会保留在外部，而是会成为 bundle.js 的一部分？该问题明确要求“外部配置文件”。 @joedotnot 感谢您的回复。你是对的。下次我会尝试更仔细地阅读。【参考方案2】：就像Joseph Fehrman 所说的，只考虑 JSON，使用 JS 对我有用。这就是我所做的。
我创建了一个名为 configurations.js 的 JS 文件，其中包含了我所需的配置
var configs =
"aUrl": "https://localhost:9090/",
"bUrl": "https://localhost:9445/";
然后在index.html中我添加了它。
<body>
<div id='root'></div>
<script src="configurations.js"></script>
<script src="dist/bundle.js"></script></body>
然后在 webpack.config.js 我像这样将它添加到 externals 中。 （注意在configurations.js中，变量的名字是configs）。
externals:
config: "configs",
然后在我想要的任何地方，我都可以导入它并很好地使用它。这在我能够在部署后更改配置的情况下非常有效（即不必重新编译我的 bundle.js 保持不变的代码:-)）。 下面给出了一个显示它是如何使用的示例。
import Component from 'react';
import axios from 'axios';
import Config from 'config';
/**
* @class GetProductAreas
* @extends Component
* @description Get ProductAreas
*/
class GetProductAreas extends Component
/**
* @class GetProductAreas
* @extends Component
* @description get product areas
*/
getproductAreas()
const url = Config.aUrl;
return axios.get(url).then((response) =>
return (response.data);
).catch((error) =>
throw new Error(error);
);
export default (new GetProductAreas());
【讨论】：
什么 webpack.config.js ？如果我们使用 create-react-app 则没有 webpack.config.js （或者它可能是隐藏的）。 cra案怎么办？【参考方案3】：接受的答案可能有效。但是，为什么要搞得这么复杂呢？
步骤#1。 创建一个文件 Config.js，包含内容
var Configs =
prop1 = "abc",
prop2 = "123"
步骤#2。通过脚本标签将文件加载到 index.html 中。
<div id='root'></div>
<script src="Config.js"></script>
<script src="dist/bundle.js"></script></body>
步骤#3。只需直接在任何 React 组件中访问设置。
class MyComponent extents Component
render()
//you can access it here if you want
let myprop1 = window.Configs.prop1;
return()
<div>myprop2 is: window.Configs.prop2</div>
步骤#4。利润？
不需要或不需要涉及 webpack、webpack-externals、webpack-config、import Config from 'config' 或任何其他 BS。
为什么有效？因为我们将 'Configs' 声明为 window 对象的一个 prop，并在全局范围内加载它。
【讨论】：
太棒了！我为这个问题看到的最简单的解决方案。未来观众的旁注：第 1 步中的var 很重要。 const 或 let 不起作用。
@m01010011 为什么会这样？我认为它在任何可以评估/执行 ES6 的地方都能正常工作。【参考方案4】：
上一个解决方案效果很好，以下是一些改进：
配置文件，在 /public 文件夹中：
config.js
var Configs =
var1: "value",
var2: "value2"
在/public/index.html文件的头部添加脚本调用
<head>
....
<script src="config.js"></script>
....
</head>
最后，从代码中调用 var。效果很好！
import React from 'react'
....
const data = window.Configs.var1
有了这个解决方案，我可以拥有多个服务器而无需重新编译，而且很容易做到。
【讨论】：
你只是在 6 个月后重复我的回答？ （看看我在 2019 年 3 月的回答）以上是关于如何在反应 jsx 中有一个外部 JSON 配置文件的主要内容，如果未能解决你的问题，请参考以下文章