在HTML中正确导入JavaScript模块与类：ES Module使用指南-js教程-PHP中文网

在HTML中正确导入JavaScript模块与类：ES Module使用指南

霞舞

发布： 2025-11-23 15:09:01

原创

121人浏览过

在HTML中正确导入JavaScript模块与类：ES Module使用指南

本文旨在详细阐述如何在html文件中正确导入和使用javascript es模块（包括类），解决常见的导入路径错误和模块加载问题。我们将重点讲解`type="module"`属性的用法、导入路径中文件扩展名的重要性，并通过代码示例演示es模块在浏览器环境下的最佳实践。

理解JavaScript ES Modules

随着现代Web开发的复杂性增加，JavaScript模块化成为组织和管理代码的关键。ES Modules（ESM）是JavaScript官方提供的模块系统，它允许我们通过export和import语句在不同文件间共享代码，如函数、变量、对象或类。在浏览器环境中，使用ESM需要特定的配置。

核心概念：type="module"

要在HTML文件中使用ES Modules，最关键的一步是在<script>标签中添加type="module"属性。这会告诉浏览器该脚本是一个ES模块，而不是传统的脚本，从而启用import和export语法。

<script type="module">
  // 在这里可以使用 import 语句
</script>

登录后复制

或者，如果你想从外部文件加载模块：

<script type="module" src="./my-module.js"></script>

登录后复制

需要注意的是，当<script type="module" src="...">标签包含src属性时，浏览器将忽略该标签内部的任何JavaScript代码。这意味着你不能在同一个script标签中既通过src加载一个模块，又在标签内部写import语句。

立即学习“Java免费学习笔记（深入）”；

export 与 import 语法

在模块文件中，你需要使用export关键字来暴露希望外部访问的代码。例如，导出一个类：

// Person2.js
class Person2 {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    getName() {
        return this.name;
    }

    getAge() {
        return this.age;
    }
}

export default Person2; // 默认导出 Person2 类

登录后复制

在另一个模块或HTML文件中的<script type="module">块中，你可以使用import关键字来导入这些导出的内容：

import pers from "./Person2.js"; // 导入默认导出的 Person2 类

登录后复制

这里，pers是为导入的Person2类指定的一个本地名称。

常见问题与解决方案

在导入JavaScript模块时，开发者常会遇到一些问题，其中最普遍的是导入路径和文件扩展名的问题。

问题一：模块路径中文件扩展名缺失

一个非常常见的错误是在import语句中省略了文件的扩展名。尽管在某些打包工具（如Webpack）中可以配置自动解析扩展名，但在浏览器原生ESM环境中，导入路径必须包含完整的文件扩展名，通常是.js。

错误示例：

import foo from "./foo"; // 缺少 .js 扩展名

登录后复制

当浏览器尝试加载这样的模块时，可能会遇到类似“Loading module was blocked because of a disallowed MIME type”（加载模块被阻止，因为不允许的MIME类型）的错误，或者根本无法找到模块。这是因为服务器在没有扩展名的情况下可能无法正确识别文件类型。

左手医生开放平台

左医科技医疗智能开放平台

查看详情

正确示例：

import foo from "./foo.js"; // 包含 .js 扩展名

登录后复制

解决方案： 始终在import语句的路径中明确指定.js文件扩展名。

问题二：相对路径与绝对路径

导入路径可以是相对路径（相对于当前文件）或绝对路径（相对于网站根目录）。

相对路径： import myModule from "./my-module.js"; (同级目录) 或 import otherModule from "../other/other-module.js"; (上级目录)。
绝对路径： import utility from "/scripts/utils.js"; (从网站根目录开始)。

确保你的导入路径与模块文件的实际位置相匹配。

完整示例：在HTML中导入并使用JavaScript类

让我们通过一个完整的例子来演示如何在HTML中正确导入并使用一个JavaScript类。

假设你的项目结构如下：

.
├── index.html
└── Person2.js

登录后复制

1. Person2.js 文件内容：

// Person2.js
class Person2 {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    getName() {
        return this.name;
    }

    getAge() {
        return this.age;
    }
}

export default Person2; // 默认导出 Person2 类

登录后复制

2. index.html 文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES Module 导入示例</title>
</head>
<body>
    <h1>JavaScript ES Module 导入演示</h1>
    <p>请打开开发者工具的控制台查看输出。</p>

    <script type="module">
        // 导入 Person2.js 中默认导出的类
        // 注意：路径中必须包含 .js 扩展名
        import Person from "./Person2.js"; 

        // 创建 Person 类的实例
        let p = new Person("Alice", 30);

        // 调用类方法并输出到控制台
        console.log("姓名:", p.getName()); // 输出: 姓名: Alice
        console.log("年龄:", p.getAge());   // 输出: 年龄: 30

        // 也可以使用 alert 进行测试
        // alert(p.getAge()); 
    </script>
</body>
</html>

登录后复制

在这个示例中：

Person2.js 定义了一个Person2类并使用export default将其导出。
index.html 中的<script type="module">标签允许我们使用import语句。
import Person from "./Person2.js"; 正确地从相对路径导入了Person2.js文件，并且包含了.js扩展名。
导入后，我们可以像使用普通JavaScript类一样创建实例并调用其方法。

注意事项与最佳实践

开发服务器： 在本地开发时，直接通过文件系统（file://协议）打开HTML文件可能会遇到CORS（跨域资源共享）或其他模块加载问题。推荐使用本地开发服务器（如live-server、Node.js的http-server或VS Code的Live Server扩展）来运行你的HTML文件，通过http://协议访问。
浏览器兼容性： 现代浏览器对ES Modules有良好的支持。对于需要兼容老旧浏览器的项目，可能需要使用Babel等工具进行转译，并结合Webpack、Rollup等打包工具。
模块图： 当你的项目变得复杂时，模块之间的依赖关系会形成一个模块图。浏览器会负责解析这个图并按正确的顺序加载和执行模块。
动态导入： 除了静态import语句，ESM还支持动态导入（import()函数），这允许你在运行时按需加载模块，提高应用性能。