JavaScript模块是封装变量、函数或类的独立代码单元,ES6引入export/import语法,具备作用域隔离、显式导出导入、路径静态等特性,支持命名导出、默认导出及混合导入方式。

JavaScript模块是一段可独立运行、封装了变量、函数或类的代码,它能避免全局污染,支持按需加载和复用。ES6(ECMAScript 2015)正式引入了export和import语法,成为现代前端开发的标准模块机制。
模块的基本特征
每个模块拥有自己的作用域,内部声明的变量、函数默认不会暴露到全局;必须显式导出才能被其他模块使用;导入时也必须明确指定来源,不支持运行时动态路径(除非用import()动态导入)。
如何导出(export)
导出有三种常见方式,适用于不同场景:
-
命名导出(Named Export):一个模块可导出多个值,用花括号接收,名称必须一致。
例如:export const PI = 3.14;export function add(a, b) { return a + b; }export class Calculator { ... } -
默认导出(Default Export):每个模块最多一个,默认导出不要求名称匹配,导入时可自定义名字。
export default function greet() { return 'Hello'; }
或export default class App { ... } -
统一导出与重命名:
export { add as sum, PI as pi };
也可结合默认导出:export { add, PI }; export default greet;
如何导入(import)
导入方式需与导出方式对应:
立即学习“Java免费学习笔记(深入)”;
-
导入命名导出:用花括号,名称必须与导出一致(可重命名)
import { add, PI } from './math.js';import { add as sum } from './math.js'; -
导入默认导出:不用花括号,可任意命名
import greet from './utils.js';import MyGreeting from './utils.js'; -
同时导入默认和命名导出:
import greet, { add, PI } from './math.js'; -
导入整个模块为一个对象(命名空间导入):
import * as math from './math.js';
之后通过math.add(1, 2)或math.PI访问
注意事项与常见问题
模块语法只在模块环境生效( 或 .mjs 文件),普通 script 不识别 import/export;路径必须是相对或绝对 URL(不能省略./或../);循环依赖存在但行为受限,应尽量避免;Node.js 从 v14 起原生支持 ES 模块,需在 package.json 中设置"type": "module" 或使用 .mjs 后缀。











