在 JavaScript 文件中，export default { ... } 是 ES6 模块导出语法，用于将一个对象、函数、类或值作为模块的默认导出，供其他文件引入使用。
它的核心作用是 模块化代码，让功能可以被复用和组合。
1. 基本语法
1
2
3
4
5
6
7
|
// module.js
export default {
name: "Module",
sayHello() {
console.log("Hello!");
}
};
|
其他文件可以通过 import 引入默认导出的内容：
1
2
3
|
// main.js
import myModule from './module.js'; // myModule 就是导出的对象
myModule.sayHello(); // 输出 "Hello!"
|
2. 特点
(1) 每个模块只能有一个 export default
一个文件（模块）中只能有一个默认导出。
如果多次使用 export default，会报错。
(2) 导入时可以自定义名称
默认导出在引入时可以用任意名称接收（如 import x from './module.js'）。
对比命名导出（export const foo = 1）必须用固定名称引入。
(3) 导出的内容可以是任意类型
1
2
3
4
5
6
7
8
9
10
11
|
// 导出对象
export default { a: 1 };
// 导出函数
export default function() {};
// 导出类
export default class {};
// 导出原始值
export default 42;
|
3. 与命名导出 (export) 的区别
| 特性 |
export default |
命名导出 (export) |
| 每个模块的数量 |
只能有一个 |
可以有多个 |
| 导出示例 |
export default obj |
export const obj = {} |
| 导入语法 |
import x from './file.js' |
import { x } from './file.js' |
| 导入限制 |
不能加花括号 |
必须加花括号 |
| 导入命名 |
任意变量名（自定义） |
固定名 |
- 导入默认导出（不带花括号）示例
1
2
3
4
5
6
7
8
|
// module.js
export default function hello() {
console.log("Hello!");
}
// main.js
import myFunction from './module.js'; // 变量名可自定义
myFunction(); // 输出 "Hello!"
|
- 导入命名导出（带花括号 {}）示例
1
2
3
4
5
6
7
8
|
// module.js
export const PI = 3.14;
export function square(x) { return x * x; }
// main.js
import { PI, square } from './module.js'; // 名称必须匹配
console.log(PI); // 3.14
square(2); // 4
|
- 混合导入默认导出和命名导出示例
1
2
3
4
5
6
7
8
|
// module.js
export default function hello() { console.log("Hello!"); }
export const PI = 3.14;
// main.js
import greet, { PI } from './module.js';
greet(); // "Hello!"
console.log(PI); // 3.14
|
4. 常见使用场景
(1) Vue/React 组件导出
1
2
3
4
5
6
7
|
// Vue 单文件组件 (SFC)
export default {
name: 'MyComponent',
data() {
return { count: 0 };
}
};
|
(2) 工具类或配置对象
1
2
3
4
5
|
// config.js
export default {
apiUrl: 'https://api.example.com',
timeout: 5000
};
|
(3) 函数或类
1
2
3
4
|
// math.js
export default function add(a, b) {
return a + b;
}
|
5. 注意事项
5.1 默认导出的本质
export default 实际上是导出一个名为 default 的变量，所以以下两种写法等价：
1
2
3
4
|
export default 42;
// 等同于
const __default__ = 42;
export { __default__ as default };
|
浏览器中使用：需在 <script> 标签添加 type="module" 属性：
1
|
<script type="module" src="main.js"></script>
|
5.2 文件扩展名（.js）可以省略
默认情况下，现代构建工具（如 Webpack、Vite、Rollup）和 Node.js 支持省略 .js 扩展名：
1
2
|
import './module'; // 等效于 './module.js'
import '../utils'; // 等效于 '../utils.js'
|
例外情况：
如果文件名包含特殊字符（如 module.v2.js），可能需要显式写出扩展名。
某些旧工具链可能需要手动配置才能省略扩展名。
5.3 目录导入与 index.js 的特殊规则
当导入路径是一个 目录（而非文件）时，Node.js 和构建工具会默认查找该目录下的 index.js 文件：
1
|
import './components'; // 实际会加载 './components/index.js'
|
为什么需要 index.js？
约定优于配置：index.js 是目录的默认入口文件，用于集中导出目录下的其他模块。
简化路径：避免写出完整的文件路径，例如：
1
2
3
4
5
|
// 没有 index.js 时
import Button from './components/Button/Button.js';
// 有 index.js 时（在 ./components/Button/index.js 中导出 Button）
import Button from './components/Button'; // 更简洁
|
示例：index.js 的典型用法
假设目录结构如下：
1
2
3
4
5
|
src/
├── components/
│ ├── Button.js
│ ├── Input.js
│ └── index.js // 集中导出所有组件
|
在 index.js 中统一导出：
1
2
3
|
// src/components/index.js
export { default as Button } from './Button';
export { default as Input } from './Input';
|
其他文件可以直接导入目录：
1
|
import { Button, Input } from './components'; // 自动解析到 index.js
|
7. 总结
export default { ... } 用于导出模块的默认内容，其他文件通过 import x from 'file' 引入。- 适合导出模块的主要功能（如 Vue 组件、主工具函数等）。
- 与命名导出 (export) 结合使用，可以实现更灵活的模块化代码组织。