HTML中JS模块化怎么引入？import与export语句使用规范

林译川

2026-11-07 • 👁 0人浏览过

在 html 中引入js模块化需使用

export

导出模块: 在你的JavaScript模块文件中，使用

export

语句导出你希望暴露给其他模块的变量、函数或类。

// moduleA.js
export const myVariable = "Hello from module A!";

export function myFunction() {
  console.log("Function from module A!");
}

class MyClass {
    constructor() {
        this.message = "Instance of MyClass";
    }

    showMessage() {
        console.log(this.message);
    }
}

export { MyClass };

import

导入模块: 在需要使用这些导出的变量、函数或类的JavaScript模块文件中，使用

import

语句导入它们。

// main.js
import { myVariable, myFunction, MyClass } from './moduleA.js';

console.log(myVariable); // 输出: Hello from module A!
myFunction(); // 输出: Function from module A!

const myInstance = new MyClass();
myInstance.showMessage(); // 输出: Instance of MyClass

路径问题:

import

语句中的路径是相对于当前文件的。确保路径正确，否则浏览器会报错。相对路径是常见的选择，但也可以配置构建工具来使用绝对路径或别名。服务器环境: 由于模块化通常涉及多个文件，直接在本地打开HTML文件可能会遇到跨域问题。建议在本地搭建一个简单的服务器，例如使用Node.js的

http-server

，或者Python的

python -m http.server

。 Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载为什么我的模块化代码在本地运行会报错？通常是因为直接用浏览器打开HTML文件，没有通过服务器。浏览器会出于安全考虑，限制直接从本地文件系统加载模块。使用本地服务器可以解决这个问题。此外，检查你的

import

语句中的路径是否正确。错误的路径也会导致模块加载失败。另外，注意

export default

和普通

export

的用法区别。使用

export default

导出的模块，

import

时可以自定义名称，而普通

export

则必须使用相同的名称。

import

和

export

有哪些不同的使用方式？

import

和

export

提供了多种灵活的使用方式。除了上面例子中的具名导出和导入，还可以使用默认导出 (

export default

)。默认导出允许你导出一个模块的默认值，导入时可以自定义名称。

// moduleB.js
const defaultValue = {
  message: "This is the default export"
};

export default defaultValue;

// main.js
import myDefaultValue from './moduleB.js';

console.log(myDefaultValue.message); // 输出: This is the default export

你也可以在同一个文件中同时使用具名导出和默认导出。另外，可以使用

export * from './anotherModule.js'

语句将另一个模块的所有导出重新导出。这种方式在构建库或框架时非常有用。如何在旧浏览器中使用模块化特性？旧版本的浏览器可能不支持ES模块。为了兼容这些浏览器，你需要使用构建工具（例如Webpack、Parcel或Rollup）将你的模块化代码转换为CommonJS或AMD格式，或者使用polyfill。这些工具可以将你的代码打包成一个或多个bundle文件，这些文件可以在旧浏览器中直接运行。此外，还可以使用