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

Question

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

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

  console.log(mod)
})()

{
  "file": "index.json"
}

Chrome 80 无法加载 json

Failed to load module script: The server responded with a non-JavaScript MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.

Firefox 73 以类似的方式失败:

Loading module from “http://127.0.0.1:8080/index.json” was blocked because of a disallowed MIME type (“application/json”).

这种行为可以克服吗？

Answer 1

您不能使用 ES6 导入直接导入 JSON。您需要从 JS 文件中导出它:

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

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

  console.log(mod)
})()