es modules 中 export default 用于导出唯一主内容,支持函数、类、对象等,导入时不加花括号且名称自由;可与命名导出共存但不推荐,常见错误包括重复默认导出、错误使用花括号导入及非模块环境运行。

在 ES Modules 中,export default 用于导出模块的“主内容”,每个文件只能有一个,默认导出的内容可以是函数、类、对象、原始值或表达式,导入时名称完全自由。
怎么写默认导出
有两类常见写法:
-
直接导出表达式:
export default function() { return 'hello'; }export default class Button {}export default { version: '1.0', init() {} }export default 42; -
先声明再导出:
const api = { get() {}, post() {} };export default api;
怎么导入默认导出
导入时**不加花括号**,变量名可任意命名:
-
import utils from './utils.js';(推荐,语义清晰) -
import anything from './utils.js';(合法,但建议用有意义的名字) - 不能写成
import { utils } from './utils.js'—— 这是命名导出的语法,会报错
默认导出和命名导出能混用吗
技术上允许,但不建议:
- 一个文件可以同时有
export default和多个export const xxx - 导入时需分开处理:
import main, { helper, PI } from './math.js' - 实际项目中容易造成 API 不一致,团队协作时更难维护,推荐统一风格:要么只用默认导出(适合单组件/单工具文件),要么只用命名导出(适合工具库、多接口模块)
常见错误提醒
几个新手高频踩坑点:
- 在一个文件里写了两次
export default→ 报语法错误 - 用
import { default } from './x.js'导入 → 语法错误,default 不是变量名,是关键字 - 在非模块环境运行(比如没加
type="module"的 script 标签)→ 报Unexpected token 'export' - 本地双击 HTML 文件打开(
file://协议)→ 浏览器因 CORS 拒绝加载模块 → 需用本地服务器(如 VS Code Live Server)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











