ES6模块是JavaScript最标准、推荐的模块化方式,支持静态分析、树摇优化、循环依赖处理及浏览器原生运行。

JavaScript 中实现模块化,ES6 模块(import/export)是目前最标准、最推荐的方式。它原生支持静态分析、树摇优化、循环依赖处理,并与现代构建工具和浏览器深度集成。
ES6 模块的核心写法
用 export 暴露功能,用 import 引入依赖,语法简洁明确:
-
导出:可默认导出(
export default)或命名导出(export const/func) -
导入:默认导入(
import xxx from './mod.js')、命名导入(import { a, b } from './mod.js')、整体导入(import * as mod from './mod.js') -
动态导入:
import('./mod.js')返回 Promise,适合按需加载
相比 CommonJS,ES6 模块的关键优势
ES6 模块是静态的、编译时确定的,带来一系列实际好处:
- 编译期检查:导入/导出语句必须在顶层,工具可在打包前发现拼写错误或缺失导出
-
真正的只读绑定:导入的变量是原始模块中对应值的实时只读引用(如
export let x = 1,修改x会影响所有导入处) - 自动死代码消除(Tree-shaking):打包工具(如 Webpack、Vite)能识别未使用的命名导出并剔除,减小最终包体积
-
更合理的循环依赖处理:模块执行顺序清晰,导入的是“活绑定”,避免 CommonJS 中因执行时机导致的
undefined问题
浏览器原生支持,无需转译即可运行
现代浏览器(Chrome 61+、Firefox 60+、Safari 11.1+)已原生支持 type="module" 脚本:
立即学习“Java免费学习笔记(深入)”;
- 直接在 HTML 中写:
- 模块路径必须是相对或绝对 URL(不支持 bare import,如
import _ from 'lodash'需借助导入映射或构建工具) - 模块默认启用严格模式,且具有自己的作用域(不污染全局)
与构建生态无缝协作
ES6 模块是现代前端工程的事实标准接口:
- Vite、Snowpack 等快构建工具直接以 ES 模块为输入,启动极快
- TypeScript 默认输出 ES 模块格式,类型定义与导入导出天然对齐
- NPM 包越来越多同时提供
exports字段和 ESM 入口(如"exports": { ".": "./dist/index.js" }),让消费端按需选择格式










