HTML：使用带有导入语句的外部 .js 文件答案

【问题标题】：HTML: using external .js file with import statementsHTML：使用带有导入语句的外部 .js 文件
【发布时间】：2021-11-18 08:42:17
【问题描述】：

我有一个 HTML 文件 ~/docs/index.html，它有一个内部 JavaScript 脚本，允许输入/输出两个文本区域。反过来，这个内部 JS 脚本会调用一个外部 JS 脚本 ~/src/Main.js，我已将它导入到我的 HTML 文件的头部。

一切似乎都很好，直到我的~/src/Main.js 需要导入其他外部 JS 文件。然后，事情似乎不再起作用了。

~/docs/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <base href="../" target="_blank">

    <!-- JavaScript imports -->
    <script type="module" src="src/Main.js"></script>
  </head>

  <body>
    <main>
      <div>
        <textarea
          id="input"
          oninput="update()"
          placeholder="Type here!"
        ></textarea>
        <textarea id="output" readonly>no way</textarea>
      </div>
      
      <!-- Textarea script -->
      <script>
        // Updates the textarea
        function update() {
          let input = document.getElementById("input");
          let output = document.getElementById("output");
      
          output.value = doubleIt(input.value);
        }
      </script> 
    </main>
  </body>
</html>

~/src/Main.js:

import "./OtherClass.js";   // THIS LINE BREAKS THINGS

export function doubleIt(input) {
  return input + input;
}

我见过this question，但那里的解决方案似乎对我不起作用。任何帮助表示赞赏。

【问题讨论】：

标签： javascript html import

【解决方案1】：

使用包含在 DOM 中的 import / export 语法的每个脚本都必须具有 type="module" 属性。

如果内联脚本使用模块中的任何函数，那么它们也需要先导入。

注意：避免像 oninput 这样的内联事件监听器，并通过 JavaScript 添加事件监听器，因为对于模块，update 函数将不再是全局值。

<script type="module">
  import { doubleIt } from "./src/Main.js";

  let input = document.getElementById("input");
  let output = document.getElementById("output");

  function update() {
    output.value = doubleIt(input.value);
  }

  input.addEventListener('input', update)
</script>

【讨论】：

那么我还需要在内部脚本中添加type="module" 吗？似乎一旦我这样做了，我就无法再访问页面元素了。
我做了更多的测试并得出了新的结论。是的，内联（内部）脚本也需要指定为type="module"。否则它将无法使用任何导入和导出语句。
这个内部脚本中的import 语句仍然在某种程度上破坏了事情。您的代码不能按原样工作，但如果我注释掉导入并将doubleIt(input.value) 替换为其他内容，它就可以工作。
没关系，问题出在我的本地设置上（特别是我需要一个本地服务器来导入 .js 文件，请参阅 here）。我的代码现在可以运行了。