js 文件中的 export default 是什么？

在 JavaScript 文件中，export default { ... } 是 ES6 模块导出语法，用于将一个对象、函数、类或值作为模块的默认导出，供其他文件引入使用。

它的核心作用是 模块化代码，让功能可以被复用和组合。

1. 基本语法

// module.js
export default {
  name: "Module",
  sayHello() {
    console.log("Hello!");
  }
};

其他文件可以通过 import 引入默认导出的内容：

// 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) 导出的内容可以是任意类型

// 导出对象
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. 导入默认导出（不带花括号）示例

// module.js
export default function hello() {
  console.log("Hello!");
}

// main.js
import myFunction from './module.js'; // 变量名可自定义
myFunction(); // 输出 "Hello!"

2. 导入命名导出（带花括号 {}）示例

// 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

3. 混合导入默认导出和命名导出示例

// 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 组件导出

// Vue 单文件组件 (SFC)
export default {
  name: 'MyComponent',
  data() {
    return { count: 0 };
  }
};

(2) 工具类或配置对象

// config.js
export default {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

(3) 函数或类

// math.js
export default function add(a, b) {
  return a + b;
}

5. 注意事项

5.1 默认导出的本质

export default 实际上是导出一个名为 default 的变量，所以以下两种写法等价：

export default 42;
// 等同于
const __default__ = 42;
export { __default__ as default };

浏览器中使用：需在 <script> 标签添加 type="module" 属性：

<script type="module" src="main.js"></script>

5.2 文件扩展名（.js）可以省略

默认情况下，现代构建工具（如 Webpack、Vite、Rollup）和 Node.js 支持省略 .js 扩展名：

import './module';      // 等效于 './module.js'
import '../utils';      // 等效于 '../utils.js'

例外情况：

如果文件名包含特殊字符（如 module.v2.js），可能需要显式写出扩展名。

某些旧工具链可能需要手动配置才能省略扩展名。

5.3 目录导入与 index.js 的特殊规则

当导入路径是一个 目录（而非文件）时，Node.js 和构建工具会默认查找该目录下的 index.js 文件：

import './components';    // 实际会加载 './components/index.js'

为什么需要 index.js？

约定优于配置：index.js 是目录的默认入口文件，用于集中导出目录下的其他模块。

简化路径：避免写出完整的文件路径，例如：

// 没有 index.js 时
import Button from './components/Button/Button.js';

// 有 index.js 时（在 ./components/Button/index.js 中导出 Button）
import Button from './components/Button'; // 更简洁

示例：index.js 的典型用法
假设目录结构如下：

src/
  ├── components/
  │   ├── Button.js
  │   ├── Input.js
  │   └── index.js  // 集中导出所有组件

在 index.js 中统一导出：

// src/components/index.js
export { default as Button } from './Button';
export { default as Input } from './Input';

其他文件可以直接导入目录：

import { Button, Input } from './components'; // 自动解析到 index.js

7. 总结

1. export default { ... } 用于导出模块的默认内容，其他文件通过 import x from 'file' 引入。
2. 适合导出模块的主要功能（如 Vue 组件、主工具函数等）。
3. 与命名导出 (export) 结合使用，可以实现更灵活的模块化代码组织。