如何在普通 HTML 中导入 Javascript 模块？

Question

我的情况如下：

我想试用 Azure 通信服务 UI 库中的一些组件：( https://azure.github.io/communication-ui-library/?path=/docs/quickstarts-composites--page )。 问题是：我想在有点遗留的代码库中使用它们（比方说旧版本的 ASP.NET），所以我无法以 React/Angular 方式导入模块。 我可能需要以普通 HTML 导入它们。

我的想法是：我可以创建一个单独的“site.js”文件，在其中导入模块并将其加载到主 _Layout.cshtml 中。

我写了这个脚本：

// TODO: How can we import this module?
import { Chat } from "@azure/communication-chat";

const chat = new Chat({
    auth: {
        token: "Your token here"
    },
    conversationId: "Your conversation Id here",
});

const chatContainer = document.getElementById("chat-container");
chat.render(chatContainer);

然后像这样导入脚本：

<script src="~/js/site.js" asp-append-version="true"></script>

但这给了我错误：“未捕获的语法错误：无法在模块外使用导入语句”。 显然这是不可能的。

所以我的问题是：这有可能吗？ 还有哪些方法可以尝试？

Answer 1

您需要将您的 JS 作为模块来获取，这需要将type="module"添加到script节点：

<script src="~/js/site.js" type="module" asp-append-version="true"></script>

取自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html 。 整个页面可能值得一读。

您只能在模块内部使用import和export语句，而不能使用常规脚本