Question

我有几个react-slick轮播的实例。它们中的每一个都需要一组不同的配置选项。

目前，我将carousel组件通过webpack捆绑在一起，然后部署到多个位置。不幸的是，这意味着捆绑包在每种情况下都略有不同，因为配置文件会更改整个捆绑包！这个解决方案的正确方法是什么？

我觉得我能想到以下解决方案：

1）异步加载配置文件。看起来像一个懒惰的解决方案，因为额外的往返行程是过度的。

2）尝试使用require.ensure将配置文件拆分为自己的块。

此解决方案的正确方法是什么？

谢谢！

Answer 1

要回复第1点，我已设法以这种方式完成配置的运行时加载：

import xhr from 'xhr'
class Config {

    load_external_config = (cb) => {
        xhr.get("config.json", {
            sync: true,
            timeout: 3000
        },(error, response, body)=>{
            if(response.statusCode==200) {
                try{
                    const conf = JSON.parse(body);
                    for(var i in conf) {
                        this[i] = conf[i];
                    }
                }catch(e){
                    /* Manage error */
                }
            } else {
                /* Manage error */
            }
        })
    }

}

export let config = new Config();

上面的类有两个基本功能，一方面它是一个“单例”，所以每次你在项目的每个文件中导入它时，istance保持不变，不会重复。另一方面，通过XHR包，它（同步）加载外部json文件，并将其实例中的每个配置语音作为第一级属性。之后，您将能够这样做：

import { config } from './config'

config.load_external_config();
config.MY_VAR

对于第2点，我想看一些例子，对于比我更熟练的人，我会继续关注这篇文章。

将JSON Config传递到同一捆绑的React Application

1 个答案: