使用 require 加载本地 json 文件？

Question

我已经在谷歌上搜索了几个小时，以为我只是在这里问。出于某种原因，我的 'require()' 不起作用。 recuirejs 已包含在内，据我所知，我的 return 值应该是我的数据，其顺序与我的 json 文件完全相同。

这是我的代码：

$(document).ready(async function() {
  let data = await fetchData('./data/file.json');
  console.log(data);
}
// fetch and return data
function fetchData(path) {
  return require([path]);
}

我最初有这个解决方案（它适用于本地主机，但我需要它而没有主机）：

function fetchData(path) {
  return fetch(path).then(response => {
    return response.json().then((data) => {
      return data;
    }).catch((err) => {
      console.log(err);
    })
  });
}

它给了我几个脚本错误和 MIME 类型不匹配，而且它记录了这个而不是我的数据：

s(e, t, i)
   arguments: null
   caller: null
  >defined: function defined(e)
   isBrowser: true
   length: 3
   name: "s"
  >prototype: Object { … }
  >specified: function specified(e)
  >toUrl: function toUrl(e)
  >undef: undef(i)

我不知道我还应该尝试什么。

谢谢！

Answer 1

RequireJS 与 Node.js 的 require 方法不兼容。它专为 AMD modules not CommonJS modules 而设计，不支持加载纯 JSON 文件。这就是您第一次尝试失败的原因。

您的第二次尝试失败，因为 file systems requests are treated as cross-origin requests。

在加载文件系统上工作时加载 JSON 文件的唯一方法是让用户 select 使用 <input type="file"> 然后 read it with JavaScript。

如果您想阅读硬编码 JSON，那么您可以考虑将其嵌入到您的应用程序中。做到这一点的简单方法是将其作为 JS 对象文字粘贴。更复杂的程序可能会受益于使用 Webpack (which would need a JSON loader 之类的工具）并在构建时将其拉入 JS，而不是在开发时（上述粘贴方法）或运行时（这是不可能的，如前几段）。

Answer 2

你有两个选择：

使用像 Webpack 这样的工具将所有前端文件放入包中
从网络服务器下载 JSON 文件：

我假设您已经在使用 jQuery，所以：

$.get('https://petstore.swagger.io/v2/swagger.json').then(function(data) {
  console.log(data.swagger);
});

在这种情况下，您必须让您的 json 文件可用于网络服务器

$.get('/dist/data/file.json').then(function(data) {
  console.log(data);
});

使用 require 加载本地 json 文件？

Loading local json file with require?

html

javascript

jquery

require