青岛建站培训怎么建设自己的网站

1. 模块系统概述

1.1 模块系统对比

特性	ES Modules	CommonJS
语法	export / import	module.exports / require
加载方式	静态加载	动态加载
使用场景	现代前端开发	Node.js 环境

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 语法对比

特性	ES Modules	CommonJS
导出单个值	export default	module.exports
导出多个值	export	exports
导入方式	import	require

4.2 使用场景

场景	ES Modules	CommonJS
现代前端开发	推荐	不推荐
Node.js 环境	支持	推荐
浏览器环境	支持	不支持

---

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 的区别与使用场景。建议根据项目需求选择合适的模块系统，以提升代码质量和开发效率。