我可以从其他 <script type="module"> 导入 ES 模块吗

Question

我想从另一个脚本标签导入。

<script type="module">
    export default "str"
</script>

<script type="module">
    import foo from "????"
    console.log(foo) // str
</script>

“？？？”里应该写什么？

Answer 1

这是不可能的。ModuleSpecifier（后面的from）必须是一个字符串，并且需要指向一个带有导出的独立 JavaScript 文件。它不能引用页面上的其他脚本标签，只能引用一个文件。

通常，<script type="module">页面本身的a只使用一次，用于调用其他模块。例如，您通常会看到或拥有类似以下内容的内容，而不是原始代码：

<script type="module">
    import foo from "str.js"
    console.log(foo) // str
</script>

// str.js
export default "str"

Answer 2

最佳答案是对的，这是不可能的。但是有一个import()函数可以从 url 导入 es 模块。该URL.createObjectURL()方法将通过 javascript 源代码创建一个 url。所以解决方法是：

<!-- Avoid executing the code below by add type=text/template -->
<script type="text/template" id="test">
  export default 'foo';
</script>
<script type="module">
  const test = await import(
    URL.createObjectURL(
      new Blob(
        [document.getElementById('test').innerText],
        {type: 'application/javascript'},
      )
    )
  );
  console.log(test.default);
</script>