JavaScript模块化以export/import为核心,ES6模块(ESM)为原生标准,支持命名导出、默认导出及混合使用;导入需在顶层,路径须明确,模块单例且按依赖顺序执行。

JavaScript模块化编程的核心是用 export 暴露功能,用 import 引入依赖,ES6模块(ESM)是原生标准,语法简洁、静态分析、支持树摇,比CommonJS更适配现代前端工程。
ES6模块的导出方式
一个模块可以按需导出变量、函数、类或默认成员:
- 命名导出(Named Export):可导出多个,导入时必须用对应名称,支持重命名
export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { ... }
- 默认导出(Default Export):每个模块最多一个,导入时名称可自定义,更灵活
export default function multiply(a, b) { return a * b; }- 也可混合使用:命名导出 + 一个默认导出
ES6模块的导入方式
导入必须在顶层作用域(不能在条件或函数内),且路径需为字符串字面量:
-
导入全部命名成员:
import * as math from './math.js'→ 用math.PI、math.add -
解构式导入命名成员:
import { PI, add } from './math.js'→ 直接用PI、add -
重命名导入:
import { add as sum } from './math.js'→ 使用sum(2, 3) -
导入默认成员:
import multiply from './math.js'(注意无大括号) -
同时导入默认 + 命名:
import multiply, { PI } from './math.js'
模块路径与执行特性
ES6模块路径必须带扩展名(如 .js)或以 /、./、../ 开头,不支持 Node 默认省略后缀;模块是单例,多次导入同一模块只执行一次,且按依赖图顺序执行(从入口开始深度优先)。
立即学习“Java免费学习笔记(深入)”;
-
浏览器中需在
中使用 - Node.js 需文件后缀为
.mjs或package.json中设置"type": "module" - 不支持运行时动态路径(
import(expr)是动态导入,返回 Promise,属进阶用法)
常见问题与注意事项
避免循环依赖:A 导入 B,B 又导入 A,可能导致部分值为 undefined;尽量拆分逻辑或用函数封装访问;另外,ESM 中 this 在模块顶层为 undefined,不是全局对象。
- 命名导出必须用确定的标识符,不能直接
export const obj = {a: 1}后再改obj.a = 2——导出的是绑定,不是拷贝 - 默认导出本质是名为
default的命名导出,import foo from 'x'等价于import { default as foo } from 'x' - 模块内顶层
var、function、class不会挂到全局,作用域严格受限











