在 HTML 文件中的 JS 脚本中导入模块

Question

为什么第 3 行打破了这个例子？它在第 3 行被注释掉后工作正常。

<button id="button">Click me</button>
<script type="module">
  import { foo } from "script.js";    // BREAKS THINGS

  document.getElementById("button")
    .addEventListener("click",
      function(){ alert("hello") } );
</script>

已在 MS Edge 93 中测试。

Answer 1

它破坏了您的代码，因为 script.js 不存在。为了能够导入模块，您必须在使用之前添加它

Answer 2

首先，"script.js" 应该是 "./script.js"。之后，控制台显示错误

Access to script at 'file:///C:/Users/jordanb/Dropbox/Git/test/script.js' from
origin 'null' has been blocked by CORS policy: Cross origin requests are only
supported for protocol schemes: http, data, chrome-extension, edge, https,
chrome-untrusted.

修复方法是使用 this question 中的服务器。

在 HTML 文件中的 JS 脚本中导入模块

Importing module in JS script inside HTML file

html

javascript

import