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';

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

✅ 总结表格：

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

• 组件：默认导出

• 工具函数：命名导出（统一导出更整洁）