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

Question

我有一个 HTML 文件 ~/docs/index.html，它有一个内部 JavaScript 脚本允许 input/output 有两个文本区域。这个内部 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;
}

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

Answer 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>

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

HTML: using external .js file with import statements

html

javascript

import