export、export default 和 module.exports 深度解析

1. 模块系统概述

1.1 模块系统对比

1.2 模块加载流程

2. ES Modules

2.1 export 使用

// math.js
export const add = (a, b) => a + b
export const subtract = (a, b) => a - b

// main.js
import { add, subtract } from './math.js'
console.log(add(1, 2)) // 3
console.log(subtract(5, 3)) // 2

2.2 export default 使用

// math.js
const add = (a, b) => a + b
export default add

// main.js
import add from './math.js'
console.log(add(1, 2)) // 3

2.3 混合使用

// math.js
export const add = (a, b) => a + b
export default function subtract(a, b) {
  return a - b
}

// main.js
import subtract, { add } from './math.js'
console.log(add(1, 2)) // 3
console.log(subtract(5, 3)) // 2

3. CommonJS

3.1 module.exports 使用

// math.js
const add = (a, b) => a + b
module.exports = add

// main.js
const add = require('./math.js')
console.log(add(1, 2)) // 3

3.2 exports 使用

// math.js
exports.add = (a, b) => a + b
exports.subtract = (a, b) => a - b

// main.js
const math = require('./math.js')
console.log(math.add(1, 2)) // 3
console.log(math.subtract(5, 3)) // 2

4. 对比分析

4.1 语法对比

4.2 使用场景

5. 互操作性

5.1 ES Modules 中使用 CommonJS

// math.js (CommonJS)
module.exports = {
  add: (a, b) => a + b
}

// main.js (ES Modules)
import math from './math.js'
console.log(math.add(1, 2)) // 3

5.2 CommonJS 中使用 ES Modules

// math.js (ES Modules)
export const add = (a, b) => a + b

// main.js (CommonJS)
const math = require('./math.js')
console.log(math.add(1, 2)) // 3

6. 最佳实践建议

6.1 使用规范

1. 现代前端项目：优先使用 ES Modules
2. Node.js 项目：使用 CommonJS
3. 混合项目：注意兼容性问题

6.2 代码组织

# ES Modules 项目结构
src/
├── components/
├── utils/
└── main.js

# CommonJS 项目结构
lib/
├── modules/
├── utils/
└── index.js

7. 常见问题与解决方案

7.1 问题列表

7.2 调试技巧

1. 控制台日志：打印模块内容
2. 断点调试：检查模块加载
3. 工具支持：使用 Babel 或 Webpack

8. 扩展阅读

• ES Modules 官方文档
• CommonJS 规范
• 前端模块化指南

通过本文的深度解析，开发者可以全面理解 export、export default 和 module.exports 的区别与使用场景。建议根据项目需求选择合适的模块系统，以提升代码质量和开发效率。