当前位置: 首页 > article >正文

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

文章目录

    • 1. 模块系统概述
      • 1.1 模块系统对比
      • 1.2 模块加载流程
    • 2. ES Modules
      • 2.1 export 使用
      • 2.2 export default 使用
      • 2.3 混合使用
    • 3. CommonJS
      • 3.1 module.exports 使用
      • 3.2 exports 使用
    • 4. 对比分析
      • 4.1 语法对比
      • 4.2 使用场景
    • 5. 互操作性
      • 5.1 ES Modules 中使用 CommonJS
      • 5.2 CommonJS 中使用 ES Modules
    • 6. 最佳实践建议
      • 6.1 使用规范
      • 6.2 代码组织
    • 7. 常见问题与解决方案
      • 7.1 问题列表
      • 7.2 调试技巧
    • 8. 扩展阅读

1. 模块系统概述

1.1 模块系统对比

特性ES ModulesCommonJS
语法export / importmodule.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 ModulesCommonJS
导出单个值export defaultmodule.exports
导出多个值exportexports
导入方式importrequire

4.2 使用场景

场景ES ModulesCommonJS
现代前端开发推荐不推荐
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 规范
  • 前端模块化指南

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

在这里插入图片描述


http://www.kler.cn/a/587339.html

相关文章:

  • 母婴商城系统Springboot设计与实现
  • LoRa数传、点对点通信、Mesh网络、ZigBee以及图传技术的区别和特点
  • H3C无线控制器二层注册典型配置举例
  • Android Dagger2 框架依赖图构建模块深度剖析(三)
  • 信息系统运行管理员教程6--信息系统安全
  • 《蓝耘容器全栈技术指南:企业级云原生与异构计算实战大全》
  • 搞定python之六----文件读写
  • 【IDEA插件开发】IntelliJ IDEA 插件开发指南
  • 《灵珠觉醒:从零到算法金仙的C++修炼》卷三·天劫试炼(47)乾坤图演路径 - 欧拉路径(Hierholzer 算法)
  • 使用DeepSeek和墨刀AI,写PRD文档、画原型图的思路、过程及方法
  • linux系统命令——权限
  • 【图论】并查集的学习和使用
  • 背诵--2
  • 如何用Deepseek制作流程图?
  • 2025年1月-3月Java面试题、笔记、简历模版汇总(需要自取)
  • 解锁C++:指针与数组、字符串的深度探秘
  • MySQL复习(检查本地MySQL是否安装、DataGrip数据库可视化工具使用、增删改查基础语法、唯一索引、SQL简单函数)
  • 【科研绘图系列】R语言绘制网络相关图(cor network plot)
  • 11 | 给 Gin 服务器添加中间件
  • Mac下安装Zed以及Zed对MCP(模型上下文协议)的支持