使用 ESM 在浏览器中动态或静态导入 json

Question

我有以下示例运行，而 JS 在它上面没有打包器。

// index.js
;(async () => {
  const mod = await import('/index.json')

  console.log(mod)
})()

{
  "file": "index.json"
}

Chrome 80 无法加载 json

加载模块脚本失败：服务器以“application/json”的非 JavaScript MIME 类型响应。每个 HTML 规范对模块脚本执行严格的 MIME 类型检查。

Firefox 73 以类似的方式失败：

由于不允许的 MIME 类型（“application/json”），从“ http://127.0.0.1:8080/index.json ”加载模块被阻止。

这种行为是可以克服的吗？

Answer 1

截至撰写本文时，导入断言现已处于第 3 阶段。

import json from "./foo.json" assert { type: "json" };

// or

import("foo.json", { assert: { type: "json" } });

将是使用 ESM 拉入 JSON 文件的语法。

Answer 2

您无法使用 ES6 导入直接导入 JSON。您需要从 JS 文件导出它：

// module.js
export default {
  "foo": { "bar": "baz" }
};

// index.js
;(async () => {
  const mod = await import('/module.js')

  console.log(mod)
})()