如何在纯 HTML 中导入 Javascript 模块？答案

【问题标题】：How to import a Javascript module in plain HTML?如何在纯 HTML 中导入 Javascript 模块？
【发布时间】：2023-01-27 21:16:17
【问题描述】：

我的情况如下：

我想试用 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>

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

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

【问题讨论】：

标签： javascript reactjs asp.net azure azure-communication-services

【解决方案1】：

JavaScript 模块是一种在 JavaScript 中组织和重用代码的方法。为了在纯 HTML 中导入 JavaScript 模块，您需要使用标记并指定 src 属性以指向包含该模块的文件。

以下是如何在 HTML 文件中导入名为“myModule.js”的 JavaScript 模块的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Importing JavaScript Module</title>
</head>
<body>
  <script type="module" src="myModule.js"></script>
  <script>
    // You can now use the imported module here
    import { myFunction } from './myModule.js';
    myFunction();
  </script>
</body>
</html>

需要注意的是，在 HTML 中导入 JavaScript 模块时，标签的 type 属性应设置为“module”，这样浏览器才能正确处理模块。

此外，如果模块与 HTML 文件不在同一目录中，您可能需要使用 ./ 或 ../ 来指定模块的路径。

值得一提的是，现代浏览器支持这种导入模块的方式，如果您的目标是较旧的浏览器，则可能需要使用 Babel 或 TypeScript 等转译器将您的 JavaScript 模块转换为与较旧浏览器兼容的 JavaScript 版本。

此外，您可以使用像 webpack 或 rollup 这样的模块捆绑器，将所有 javascript 文件捆绑到一个文件中，然后您可以将捆绑的文件导入到 HTML 中。

【讨论】：