Question

我尝试使用新浏览器的功能，允许您加载与脚本相关的JavaScript模块。

这个例子似乎非常直截了当。您只需将类型属性从"text/javascript"更改为"module"。

我有一个简单的test.js文件，它只抓取一个DOM节点并将其内部HTML设置为＆＃34; Hello＆＃34; ：

const output = document.querySelector("#output");
output.innerHTML = "hello";

这在type = "text/javascript"时有效但在type = "module"时失败：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Modules</title>
  </head>
  <body>
    <main>
      <h1>JS Modules</h1>
      <div id="output"></div>
    </main>
    <script type="module" src="./test.js"></script>
  </body>
</html>

我错过了什么？

Answer 1

<script type="module"></script>

仅在现代浏览器中受支持。他们在......

Safari 10.1。
Chrome 61。
Firefox 54--落后于 about：config中的dom.moduleScripts.enabled设置。
Edge 16。

为了向后兼容，您可以添加nomodule脚本

<script type="module" src="./test.js"></script>
<script nomodule src="fallback.js"></script>

这是一个更完整的参考 https://jakearchibald.com/2017/es-modules-in-browsers/

如何在浏览器中加载简单的es6模块？

1 个答案: