JavaScript中的命名导出(暴露)

在 JavaScript / React 中，"分别暴露 "和"统一暴露"是两种常用的模块导出方式。下面我来清晰地解释它们的区别，并给出示例：

✅ 一、分别暴露（命名导出）

每个变量或函数分别用 export 导出。

📦 示例：

复制代码

// utils.js
export const sum = (a, b) => a + b;
export const multiply = (a, b) => a * b;

✅ 导入方式：

复制代码

import { sum, multiply } from './utils';

✅ 特点：

可以只导入其中一部分：
复制代码
```
import { sum } from './utils';
```
必须使用原名称导入 ，除非使用 as 重命名：
复制代码
```
import { sum as add } from './utils';
```

✅ 二、统一暴露（也是命名导出）

先定义，再统一用 export {} 导出。

📦 示例：

复制代码

// utils.js
const sum = (a, b) => a + b;
const multiply = (a, b) => a * b;

export { sum, multiply };

✅ 导入方式：

复制代码

import { sum, multiply } from './utils';

✅ 特点：

✅ 三、默认暴露（default export）

每个模块只能有一个 export default

📦 示例：

复制代码

// MyComponent.jsx
export default function MyComponent() {
  return <div>Hello</div>;
}

✅ 导入方式：

复制代码

import MyComponent from './MyComponent';

✅ 特点：

导入时可以使用任意名称（默认导出不需要花括号）：
复制代码
```
import Anything from './MyComponent'; // 合法
```

✅ 四、混合使用（不推荐）

复制代码

// utils.js
export const sum = () => {};
export default function main() {}

可以这样导入：

复制代码

import main, { sum } from './utils';

👉 尽量避免这样写，容易引起混淆。

✅ 总结表格：

如果你是写组件库或者模块工具，推荐使用：