如何使用requirejs加载静态JSON文件？

Question

我想保留一个JSON文档以存储一些简单的数据，并且我想要在define()调用中需要此文档并使用JSON对象，以便我可以使用它。 这不是async调用，我是说这应该是为了开发目的，但与实际的async API调用不同，其中内容是动态的，我确实想在构建时编译文件。

- ThomasReggi

---

那么你的问题是什么？因为我没有看到任何问题。 - Willem D'Haeseleer

@WillemD'haeseleer 嗯，我不确定该怎么做。我不能在路径中包含一个 .json 文件。 - ThomasReggi

Answer 1

最简单的方法是使用requirejs的json插件，这样可以将文件包含在构建中。

https://github.com/millermedeiros/requirejs-plugins
这里有一个例子:

require(['json!someFile.json'], function(data){
  ...
})
// It does not actually need to be a .json extension, this will work to:
require(['json!someFile'], function(data){
  ...
})

如果您想在r.js构建中包含该文件，以便始终在main/js引导文件中进行优化，则必须将其添加到包含选项中。

您还可以使用requirejs文本插件来实现这一点，通常用于加载模板文件，但也可用于加载.json文件。

https://github.com/requirejs/text

您需要自行使用JSON.parse解析内容
（如果需要支持旧版浏览器，则需要包含json2.js）

您还可以将json包装在自己的define()中，以便可以像传统方式一样进行引用，但如果受限于实际的.json文件，则无法工作。

另一个选择是使用jquery或其他方式自己通过ajax请求文本文件。

$.get('somefile.json', function(data) {
  // do something with your data
});

- Willem D'Haeseleer

---

我选择了requirejs-plugins，其中有一个我完全忽略的json插件。但是它需要text作为依赖项。感谢你！今天我刚开始在浏览器上使用RequireJS，它真的很棒。我仍然希望在构建时它不再使用ajax来获取文档。 - ThomasReggi

@ThomasReggi，请查看我对此的适应答案以获取更多信息。 - Willem D'Haeseleer

我在使用r.js进行优化时，将文本转换为JSON内容时遇到了麻烦。提前告知一下。 - SimplGy

@SimpleAsCouldBe 请详细说明你的困扰。 - Willem D'Haeseleer

@WillemD'haeseleer 我有时会使用 text!./colors.json，然后对其进行解析以获取配置值。这在开发中有效，但 r.js 优化器会抛出错误。我将其隔离到特定文件，并将其替换为包装在 amd define 中的标准模块，如 ./colors，优化器不再失败。我不感兴趣找到根本原因，只是必须完成工作。如果您愿意，我们可以线下交流。 - SimplGy

Answer 2

因为以下原因，我将此作为答案发布：

• 这正是提问者实际使用的解决方案
• 与要求文本相比，它更加简洁，因为它总是为您执行JSON.parse()。

RequireJS有一个JSON插件。语法很简单：

require(['json!someData.json'], function(data){
  ...
})

- mikemaccana

---

对于那些觉得不太清楚的人，["json!/some/ajax/endpoint"] 也很好用。 - penguat

可以加载本地文件吗？ - Erik

@erik 我通常使用Web服务器（通过gulp）在本地开发，因此始终加载http://或https:// URL。我建议你也这样做。如果你问的是file:// URLs，我不清楚。 - mikemaccana

似乎不适用于文件URL。我在Chrome中一直收到这个错误：Access to XMLHttpRequest at 'file:///C:/test/settings.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https, isolated-app. - Krisztián Balla