Question

我希望在基于React的项目中有一个外部配置文件（JSON）。这是最终的结果，或者当我交付它（公共文件夹和bundle.js）时，我的配置文件也应该给出。用户应该能够根据自己的意愿更改配置并使用我的应用程序。那就是没有重新编译我的代码应该能够使用它。换句话说，配置文件不应该与我的应用程序捆绑在一起。

Answer 1

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

Answer 2

问题有点模糊。我想我知道你在问什么。只要您计划使用Webpack或Browserify，您就可以执行以下操作。它确实需要稍微不同的思维，而不是使用JS文件来掩盖它的纯JSON文件。

config.js：

<a class="active" th:text="#{label.management}"></a>
...
<input type="text" th:field="*{username}" th:placeholder="#{label.username}" />
...
<div class="fixed-action-btn tooltipped" data-position="left" data-delay="50" th:data-tooltip="#{label.quicklinks}">
    <a class="btn-floating btn-large orange">
        <i class="large icons ion-edit"></i>
    </a>
    ....
</div>

然后使用配置从您的文件中执行类似以下操作。

app.js：

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

module.exports = config;

Answer 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，从“ config”或任何其他BS导入Config。

为什么有效？因为我们将“ Configs”声明为window对象的prop，并全局加载了它。

Answer 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

使用此解决方案，我可以拥有多个服务器而无需重新编译，而且很容易做到。

如何在反应中使用外部JSON配置文件jsx

4 个答案: