JavaScript ES Modules 中 export 用于对外暴露模块成员,支持命名导出(可多成员、可重命名)、默认导出(每模块至多一个、可自定义导入名)及混合导出;需注意顶层声明、绑定特性、路径扩展名等规范。

在 JavaScript ES Modules 中,export 用于对外暴露变量、函数、类等模块成员,让其他模块可通过 import 加载使用。导出方式灵活,但需注意语法规范和作用域限制。
命名导出(Named Export)
最常用的方式,可一次导出多个成员,每个成员必须有明确名称。
- 在声明时直接导出:
export const PI = 3.14;export function add(a, b) { return a + b; }export class Calculator { ... } - 集中导出(推荐用于整理):
const PI = 3.14;<br> function add(a, b) { return a + b; }<br> class Calculator { ... }<br> export { PI, add, Calculator }; - 导出时重命名:
export { add as sum, PI as piValue };
默认导出(Default Export)
每个模块最多一个默认导出,调用方导入时可自定义名称,适合导出主功能或单例。
- 函数、类、对象、值均可作为默认导出:
export default function greet(name) { return `Hello, ${name}`; }export default class App { ... }export default { version: '1.0', init() { ... } }; - 注意:不能对
let/const/function声明直接加export default(语法错误),需先声明再导出,或用表达式形式:export default function() { ... };✅export default (a, b) => a + b;✅export default class { ... };✅
混合导出(Named + Default)
一个模块可同时包含命名导出和默认导出,适用于提供主接口 + 工具函数的场景。
- 例如:
export const VERSION = '2.0';<br> export function helper() { ... }<br> export default class MainService { ... } - 对应导入方式:
import MainService, { VERSION, helper } from './module.js';
注意事项与常见问题
避免因细节疏忽导致报错或行为异常:
-
不能在块级作用域(如 if、for、函数内)使用顶层 export ——
export必须位于模块顶层; -
导出的不是值的拷贝,而是绑定(live binding):若导出的是变量,原始值变化后,导入方读取也会反映更新(
const除外); - 无导出的模块仍是有效模块,可用于副作用(如 polyfill 注入),但无法被解构导入;
-
路径必须带扩展名或为合法模块路径:ESM 中
import './utils'会报错,应写成import './utils.js'或配置打包工具处理。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











