如何在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配置文件？

- dommer

---

一个核心问题是他们会多久更新这些值。为了更改颜色而进行新部署是愚蠢的。但是，如果每年只需进行一次更改，则从数据库或API加载数据也很愚蠢。 允许人们编辑JSON文件也不是一个好主意。 - Garry Taylor

Answer 1

我认为最好的方法是创建一个 API 端点，供 React 与之交互以加载它们。

- erik-sn

---

你如何确保在 React 应用加载之前加载此配置？ - Sreevisakh

Answer 2

您不必使用webpack捆绑它。您可以使用普通的ajax调用来加载json或使用。 https://github.com/ded/script.js 然而，如果您真的想使用webpack loader，您可以尝试external-loader。 https://github.com/sheerun/external-loader 更多讨论请参见: “Require external (unmanaged) file”

- Kevin Law