如何在反应jsx中有一个外部JSON配置文件

Question

I want to have a external configuration file (JSON) in my React based project. 我希望在我的基于React的项目中有一个外部配置文件（JSON）。 That is the ultimate outcome or when I deliver it (public folder and the bundle.js) my configuration file also should be given. 这是最终的结果，或者当我交付它（公共文件夹和bundle.js）时，我的配置文件也应该给出。 The User should be able to change the configurations according to his or her wish and use my app. 用户应该能够根据自己的意愿更改配置并使用我的应用程序。 That is there without recompiling my code one should be able to use it. 那就是没有重新编译我的代码应该能够使用它。 In other words configuration file should not bundle with my app. 换句话说，配置文件不应与我的应用程序捆绑在一起。

Answer 1

Like Joseph Fehrman said without thinking only about the JSON, using JS worked for me. 就像Joseph Fehrman说的那样，只考虑JSON，使用JS为我工作。 This is what I did. 这就是我做的。

I created a JS file called configurations.js which included my required configurations 我创建了一个名为configurations.js的JS文件，其中包含我所需的配置

var configs = {
"aUrl": "https://localhost:9090/",
"bUrl": "https://localhost:9445/"};

Then in the index.html I added it. 然后在index.html中我添加了它。

<body>
<div id='root'></div>
<script src="configurations.js"></script>
<script src="dist/bundle.js"></script></body>

Then in the webpack.config.js I added it to externals like this. 然后在webpack.config.js中我将它添加到这样的外部。 (Note that in the configurations.js , name of the variable is configs ). （注意，在configurations.js中 ，变量的名称是configs ）。

externals: {
    config:  "configs", 
}

Then in where ever I want it, I can import it and use it nicely. 然后在我想要的地方，我可以导入它并很好地使用它。 This worked perfectly where I was able to change the configurations after it was deployed (That is did not have to recompile the code where my bundle.js remained untouched :-)). 这完全适用于我在部署之后能够更改配置的地方（这不需要重新编译我的bundle.js保持不变的代码:-)）。 An example showing how it was used is given below. 下面给出了一个如何使用它的例子。

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());

Answer 2

The question is a bit vague. 问题有点模糊。 I think I know what you are asking for. 我想我知道你在问什么。 As long as you are planning on using Webpack or Browserify you could do the following. 只要您计划使用Webpack或Browserify，您就可以执行以下操作。 It does require slightly different thinking instead of a pure JSON file using a JS file to mask it. 它确实需要稍微不同的思维，而不是使用JS文件来掩盖它的纯JSON文件。

config.js: config.js：

let config = {
  option1: true,
  option2: false
}

module.exports = config;

And then from your file using the configuration you could do something similar to the following. 然后使用配置从您的文件中执行类似于以下操作的操作。

app.js: 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'));

Answer 3

The accepted answer may work. 接受的答案可能有效。 However, why make it so complicated? 但是，为什么要这么复杂呢？

Step#1. 步骤1。 Create a file Config.js, with content 使用内容创建文件Config.js

var Configs = {
    prop1 = "abc",
    prop2 = "123"
}

Step#2. 第2步。 Load the file in index.html via script tag. 通过脚本标记在index.html中加载文件。

<div id='root'></div>
<script src="Config.js"></script>
<script src="dist/bundle.js"></script></body>

Step#3. 步骤＃3。 Just access the setting directly within any React component. 只需在任何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>       
        }
    }
}

Step#4. 第4步。 Profit? 利润？

Does not require or need to involve webpack, webpack-externals, webpack-config, import Config from 'config', or any other BS. 不需要或不需要涉及webpack，webpack-externals，webpack-config，从'config'导入配置，或任何其他BS。

Why it works? 为什么会这样？ because we declared 'Configs' to be a prop of the window object, and loaded it globally. 因为我们声明'Configs'是窗口对象的prop，并在全局加载它。

Answer 4

Last solution worked great, here's some improvements: 最后的解决方案很有效，这里有一些改进：

Config file, in /public folder: 配置文件，在/ public文件夹中：

config.js config.js

var Configs = {
  var1: "value",
  var2: "value2"
}

In /public/index.html file, add script call in the header 在/public/index.html文件中，在标头中添加脚本调用

<head>
....
<script src="config.js"></script>
....
</head>

Last, call the var from the code. 最后，从代码中调用var。 Works great! 效果很好！

import React from 'react'
.... 

const data = window.Configs.var1

With this solution I can have several servers without recompiling, and it's easy to do. 有了这个解决方案，我可以有几台服务器而无需重新编译，而且很容易做到。

如何在反应jsx中有一个外部JSON配置文件

问题描述

4 个解决方案

解决方案1
4 已采纳 2018-04-03 03:37:52

解决方案2
1 2018-01-27 04:05:58

解决方案3
1 2019-03-06 09:15:06

解决方案4
0 2019-09-04 23:18:16

如何在反应jsx中有一个外部JSON配置文件

问题描述

4 个解决方案

解决方案1 4 已采纳 2018-04-03 03:37:52

解决方案2 1 2018-01-27 04:05:58

解决方案3 1 2019-03-06 09:15:06

解决方案4 0 2019-09-04 23:18:16

解决方案1
4 已采纳 2018-04-03 03:37:52

解决方案2
1 2018-01-27 04:05:58

解决方案3
1 2019-03-06 09:15:06

解决方案4
0 2019-09-04 23:18:16