es6 模块导出方式全解析

在 TypeScript/JavaScript 项目中，模块导出是代码组织的关键环节。本文将详细讲解各种导出方式的语法、用途和最佳实践。

1. 基本导出类型

命名导出

// 直接导出声明
export const name = "张三";
export function greet() {
  return "你好";
}

// 先声明后导出
const age = 25;
function sayHello() {
  return "你好";
}
export { age, sayHello };

// 重命名导出
const userAge = 30;
export { userAge as age };

导入方式：

import { name, greet, age, sayHello } from "./module";

默认导出

// 直接默认导出
export default function () {
  return "默认函数";
}

// 先声明后默认导出
const config = { host: "localhost" };
export default config;

导入方式：

import anyNameYouWant from "./module";

2. 重新导出（Re-export）

重新导出命名导出

// 完整写法
import { feature1, feature2 } from "./features";
export { feature1, feature2 };

// 简写形式
export { feature1, feature2 } from "./features";

// 重命名重新导出
export { feature1 as mainFeature } from "./features";

// 全部重新导出
export * from "./features";

重新导出默认导出

// 将其他模块的默认导出作为当前模块的默认导出
export { default } from "./logger";

// 将其他模块的默认导出作为命名导出
export { default as logger } from "./logger";

// 将其他模块的命名导出作为默认导出
import { mainFeature } from "./features";
export default mainFeature;
// 或简写为
export { mainFeature as default } from "./features";

3. 混合导出

// 同时使用默认导出和命名导出
const mainFunction = () => "主函数";
export default mainFunction;
export const helper = () => "辅助函数";

// 导入方式
import mainFunction, { helper } from "./module";

4. 常见模式和最佳实践

索引文件（barrel file）模式

在index.ts中收集和重新导出多个模块：

// features/index.ts
export { feature1 } from "./feature1";
export { feature2 } from "./feature2";
export { default as mainFeature } from "./mainFeature";

// 使用时简化导入
import { feature1, feature2, mainFeature } from "./features";

API 包装模式

将第三方库重新包装并导出：

// wrappers/logger.ts
import originalLogger from "third-party-logger";

// 可以添加自定义功能
const enhancedLogger = {
  ...originalLogger,
  customLog: (msg) => originalLogger.log(`[自定义] ${msg}`),
};

export default enhancedLogger;

服务导出模式

// services/api.service.ts
export class ApiService {
  // 实现...
}

// services/index.ts
export { ApiService } from "./api.service";
export { UserService } from "./user.service";

5. 各导出方式对比

导出方式	语法	导入方式	最适用场景
命名导出	export const x	import { x }	多个相关功能
默认导出	export default x	import x	单一主要功能
重新命名导出	export { x as y }	import { y }	API 适配
全部重新导出	export * from "./x"	import { any }	模块集合
默认重新导出	export { default }	import x	转发模块
混合导出	混合使用上述	import x, { y }	复杂模块

6. 推荐实践

1. 接口和类型使用命名导出

   export interface User {
     name: string;
   }

2. 主要功能类使用默认导出

   export default class UserService {
     /* ... */
   }

3. 工具函数使用命名导出

   export function formatDate() {
     /* ... */
   }

4. 简化导入路径使用 index 文件

   // index.ts
   export * from "./validation";
   export * from "./formatting";

5. 保持命名一致性

   导入时尽量不重命名，保持代码可读性。

总结

选择合适的导出方式可以显著提高代码的可读性和可维护性。默认导出适合模块的主要功能，命名导出适合辅助功能和多功能模块。重新导出则是组织大型项目的有效工具。

在实际项目中，根据模块的用途和复杂度灵活选择导出方式，同时保持团队代码风格的一致性。