在 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';
👉 尽量避免这样写,容易引起混淆。
✅ 总结表格:
类型 | 写法示例 | 导入方式 | 特点 |
---|---|---|---|
分别暴露 | export const a = 1; |
import { a } from './x' |
可多次写、导入时必须加花括号 |
统一暴露 | export { a, b }; |
import { a } from './x' |
统一管理、导入规则同分别暴露 |
默认暴露 | export default function() {} |
import x from './x' |
只允许一个、导入时不加花括号 |
如果你是写组件库或者模块工具,推荐使用:
-
组件:默认导出
-
工具函数:命名导出(统一导出更整洁)