一文说清：默认导出`export default` /命名导出 `export`

在 JavaScript 和 TypeScript 的模块化开发中，正确理解导出(export)和导入(import)机制是至关重要的。本文将通过一个实际案例深入分析两种导出方式的区别和使用场景。

案例

我们有以下两个文件：

MenuItem.tsx

const Item = [
  // ...
];
export default Item;

Sidebar.tsx

import MenuItemConfig from './MenuItem';

虽然导出的变量名为 Item，但导入时却使用了 MenuItemConfig，这种用法是完全正确的。这是因为在源文件中使用了默认导出(export default)。

默认导出

1. 命名自由性：导入时可以赋予任意名称

   import AnyName from './module';

2. 每个模块只能有一个默认导出

   export default Item;
   // 一个文件中只能有一个 export default

3. 导入时不需要花括号

   import MyName from './module'; // 正确

4. 可以与命名导出共存

   export const namedExport = ...;
   export default Item;

命名导出

1. 名称必须匹配

   export const Item = [...];
   // 导入时必须使用相同名称
   import { Item } from './module';

2. 一个模块可以有多个命名导出

   export const A = ...;
   export const B = ...;
   export function C() {...}

3. 导入时需要使用花括号

   import { Item } from './module'; // 正确

4. 可以使用as重命名

   import { Item as MenuItemConfig } from './module';

为什么案例中的用法正确？

在给定的案例中：

• MenuItem.tsx 使用了 export default，因此它是一个默认导出
• 在导入时，可以自由命名导入的变量为 MenuItemConfig
• 这种命名实际上提高了代码可读性，因为 MenuItemConfig 比 Item 更能表达这个变量的用途

最佳实践建议

1. 根据使用场景选择导出类型：

   • 当模块主要导出一个主要实体时，使用默认导出
   • 当模块需要导出多个实体时，使用命名导出

2. 保持一致性：

   • 在整个项目中保持一致的导出/导入风格
   • 考虑团队约定或项目规范

3. 命名要有意义：

   • 即使是默认导出，导入时也应该使用有意义的名称
   • 避免使用过于通用的名称如 data、config 等

4. 混合使用时注意：

   export const A = ...;
   export default B;
   
   // 导入方式
   import B, { A } from './module';

常见问题解答

Q：可以同时使用默认导出和命名导出吗？

A：可以，但不推荐频繁混合使用，可能会造成混淆。

Q：如何知道一个模块使用的是哪种导出方式？

A：查看模块的源代码或类型定义文件(.d.ts)，看使用的是 export default 还是 export const/let/function 等。

Q：哪种导出方式更好？

A：没有绝对的好坏，取决于具体场景。React 组件通常使用默认导出，而工具函数库更多使用命名导出。

结论

理解 JavaScript/TypeScript 的模块系统对于编写可维护的代码至关重要。默认导出提供了命名的灵活性，而命名导出提供了明确的接口契约。在实际开发中，应该根据模块的用途和团队的约定选择合适的导出方式，并保持一致性。

在本文的案例中，虽然原始变量名为 Item，但由于使用了默认导出，导入时重命名为 MenuItemConfig 是完全合法且合理的做法，甚至可能提高了代码的可读性。