不能在模块客户端外使用 import 语句

Question

在客户端，我只想导入 Javascript 模块的特定部分。但我想按需执行此操作，例如当用户执行需要模块特定部分的操作时。我能够在 HTML 文件中完成此操作，方法是：

<script type="module">
 import { sayHi } from "/public/js/sayHi.js";
 sayHi("John");
</script>

现在我想做同样的事情，但是在我的客户端 JS 文件中，这样我就可以运行随时加载（而不是在页面加载时，如上例所示）。我从解决它得到的最接近的是运行在我的客户端 JS 文件中解决这个问题：

import("/public/js/sayHi.js")

但问题是最后一个脚本加载了整个模块，而不仅仅是我想要的部分。如果我尝试这样做：

import { sayHi } from "./sayHi.js";

我收到错误消息“无法在模块外使用导入语句”。

如何通过我的客户端 JS 只导入 { sayHi } 部分？

P.S.: 举个例子，我想在我的客户端 JS 中有类似的东西：

buttonX.addEventListener('click', async () => {
  const a = await import { sayHi } from "./sayHi.js";;
});

Answer 1

It loads the whole module, not just the part that I want

它总是这样，你无法避免。当您使用 import {…} from '…' 时也会发生这种情况 - 它只是不会将所有内容导入当前模块范围。就像你调用import(…)一样，你不必使用所有可用的部分：

buttonX.addEventListener('click', async () => {
  const { sayHi: a } = await import("./sayHi.js");
  a();
});

Cannot use import statement outside a module CLIENT-SIDE