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

我运行以下示例，而 JS 之上没有捆绑器。

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

  console.log(mod)
})()

{
  "file": "index.json"
}

Chrome 80 无法加载 json

无法加载模块脚本：服务器响应非 JavaScript MIME 类型“application/json”。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

Firefox 73 也以类似的方式失败：

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

这种行为可以克服吗？

导入断言 https://github.com/tc39/proposal-import-assertions截至撰写本文时，现已进入第 3 阶段。

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

// or

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

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