reactjs - 如何在 React JS 应用程序中动态加载外部配置设置？

Question

我目前正在使用 Webpack 来管理我的 React JS 应用程序的配置。

我有一个由我的开发构建脚本加载的 config.development.json 文件。其中包含

{
  "primary1Color": "pink"
}

它在Webpack脚本中加载如下

externals: {
    configuration: JSON.stringify(require("./config.development.json"))
}

生产版本也有类似的设置。

我在我的应用程序中引用配置参数，如下

import configuration from "configuration";

const mainColor = configuration.primary1Color;

这一切都正常。

但是，我希望允许在部署后配置设置——即让应用程序在运行时读取配置文件。然后，如果客户希望更改配色方案，他们可以这样做，而无需我重建应用程序。

如何让应用程序动态加载我的 JSON 配置文件？

Answer 1

您不必将其与 webpack 捆绑在一起。您可以使用普通的ajax调用来加载json或使用script.js。

https://github.com/ded/script.js

但是如果你真的想使用 webpack 加载器，你可以尝试 external-loader。

https://github.com/sheerun/external-loader

更多讨论在这里: "Require external (unmanaged) file"