如何在react.js的构建中添加动态json？

Question

我有一个 React 应用程序，它使用以下命令从本地 json 文件加载数据

从“./data.json”导入数据

一切工作正常，没有任何问题，我可以在 3000 中打开我的 index.html，也可以在浏览器中将其作为简单的 HTML 页面打开。

现在我运行npm run build来创建构建目录。然而，我的 json 值变得有点停滞，因为它是在构建中的 javascript 中硬编码的。所以问题是我在 build 目录中的代码如何动态地从特定位置读取 json 文件。

Answer 1

我的问题：为什么不从服务器端 API 使用fetch和提供 JSON？

部分回答你的问题：

在不更改任何 webpack 配置的情况下，您可以使用该import()函数而不是import，并且将使用 js 文件中的 json 内容构建一个块。

async function fn() {
    const json = await import("./foo.json")
    document.title = json.bar
}

另一方面，可能webpack有一种方法可以将此输出配置为 json，但为此您需要npm run eject或使用工具来覆盖 webpack 生产配置。