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

server/2025/3/16 18:02:26/

文章目录

    • 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.ppmy.cn/server/175493.html

相关文章

【蓝桥杯—单片机】第十五届省赛真题代码题解析 | 思路整理

第十五届省赛真题代码题解析 前言赛题代码思路笔记竞赛板配置建立模板明确基本要求显示功能部分频率界面正常显示高位熄灭 参数界面基础写法:两个界面分开来写优化写法:两个界面合一起写 时间界面回显界面校准校准过程校准错误显示 DAC输出部分按键功能部…

【免费】1949-2020年各省人均GDP数据

1949-2020年各省人均GDP数据 1、时间:1952-2020年 2、来源:国家统计局、统计年鉴 3、指标:各省人均GDP 4、范围:31省 5、指标解释:人均GDP(Gross Domestic Product per capita)是指一个国家…

生态安全的范式

生态安全是一个内涵很大的概念。在不同的场景下,其解读不太一致。一般来说,存在两种解读。一是防止由于生态环境的退化对经济基础构成威胁,主要指环境质量状况低劣和自然资源的减少以及退化削弱了经济可持续发展的支撑能力;二是防…

【接口封装】——22、读写文件

解释&#xff1a; 1、封装内容&#xff1a;对不同文件内容的读取->处理->写入 2、文件流写入 3、插入处理函数&#xff1a; if (!replaceJsTxt(tmpFileContent)) return; 函数定义&#xff1a; #include <QMessageBox> #include <QTextStream>void init…

3.14-进程间通信

进程间通信 IPC 进程间通信的原理&#xff0c;借助进程之间使用同一个内核&#xff0c;借助内核&#xff0c;传递数据。 进程间通信的方法 管道&#xff1a;最简单。信号&#xff1a;开销小。mmap映射&#xff1a;速度最快&#xff0c;非血缘关系之间。socket&#xff08;本…

React使用路由表

目录 前言 实现步骤 1. 安装依赖 2. 创建路由配置文件 高级配置 嵌套路由配置 对比两种配置方式 传统 JSX 方式 路由表方式优势 完整功能示例 带路由守卫的配置 注意事项 总结 前言 React Router 从 v6 版本开始支持类似 Vue 的集中式路由表配置方式&#xff0c;通…

31.代码随想录算法训练营第三十一天|56. 合并区间,738. 单调递增的数字 ,968. 监控二叉树(一刷跳过)

31.代码随想录算法训练营第三十一天|56. 合并区间&#xff0c;738. 单调递增的数字 &#xff0c;968. 监控二叉树&#xff08;一刷跳过&#xff09; 56. 合并区间 - 力扣&#xff08;LeetCode&#xff09;&#xff0c; 以数组 intervals 表示若干个区间的集合&#xff0c;其中…

MySQL开发陷阱与最佳实践:第1章:MySQL开发基础概述-1.1 MySQL简介与应用场景

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 MySQL开发陷阱与最佳实践&#xff1a;第1章&#xff1a;MySQL开发基础概述-1.1 MySQL简介与应用场景1.1.1 MySQL的发展历程与市场地位1.1.2 MySQL的核心特性与技术优势1.1.2…