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

news2025/3/16 11:27:43

文章目录

    • 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.coloradmin.cn/o/2316002.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

qwen2.5-vl多机多卡分布式部署

记录一下工作中进行多机多卡部署qwen2.5-vl多模态大模型踩过的坑 第一个天坑就是官方提供的镜像qwenllm/qwenvl:2.5-cu121有问题,在titan显卡会抛出cuda error:no kernel image is availabe for execution on the device. 这是cuda内核与GPU不兼容的问题&#xff0c…

【红黑树】—— 我与C++的不解之缘(二十五)

前言 学习了avl树,现在来学习红黑树。 一、什么是红黑树 红黑树是一颗平衡二叉搜索树,它每一个节点增加了一个存储位表示节点的颜色,可以是红色或者黑色。 相比较于AVL树,红黑树也是一个自平衡二叉搜索树,但是它与AVL树…

驾驭 DeepSeek 科技之翼,翱翔现代学习新天际

在当今这个信息爆炸的时代,学习的方式和途径正在经历着前所未有的变革。人工智能技术的飞速发展,为我们的学习带来了全新的机遇和挑战。DeepSeek 作为一款强大的大语言模型,凭借其卓越的性能和丰富的功能,为现代学习注入了新的活力…

DeepSeek本地部署 (Windows+Ollama+Docker Desktop+ RAGFlow)

适用场景: 1、商城的小机器人自动根据实际情况回复 2、需要7*24小时运行在线回复,如:在线购物、在线咨询、在线招生等 3、无人值守环境 2025年1月,DeepSeek 正式发布 DeepSeek-R1 推理大模型,DeepSeek-R1 成本价格低…

SPI驱动(八) -- SPI_DAC设备驱动程序

文章目录 参考资料:一、编写设备树二、 编写驱动程序三、编写测试APP四、Makefile五、上机实验 参考资料: 参考资料: 内核头文件:include\linux\spi\spi.h内核文档:Documentation\spi\spidevDAC芯片手册:…

MySQL 衍生表(Derived Tables)

在SQL的查询语句select …. from …中,跟在from子句后面的通常是一张拥有定义的实体表,而有的时候我们会用子查询来扮演实体表的角色,这个在from子句中的子查询会返回一个结果集,这个结果集可以像普通的实体表一样查询、连接&…

HarmonyOS NEXT开发进阶(十二):build-profile.json5 文件解析

文章目录 一、前言二、Hvigor脚本文件三、任务与任务依赖图四、多模块管理4.1 静态配置模块 五、分模块编译六、配置多目标产物七、配置APP多目标构建产物八、定义 product 中包含的 target九、拓展阅读 一、前言 编译构建工具DevEco Hvigor(以下简称Hvigor&#x…

深度学习笔记(37周)

目录 摘要 Abstracts 1. 介绍 2. 相关工作 3. 模型 3.1 时序段网络TSN 3.2 学习时序段网络 4. 训练结果 5. 结论 摘要 本周阅读的论文是《Temporal Segment Networks: Towards Good Practices for Deep Action Recognition》。作者主要想通过较少的训练样本&#xff…

ELK+Filebeat+Kafka+Zookeeper安装部署

1.安装zookeeper zookpeer下载地址:apache-zookeeper-3.7.1-bin.tar.gzhttps://link.csdn.net/?targethttps%3A%2F%2Fwww.apache.org%2Fdyn%2Fcloser.lua%2Fzookeeper%2Fzookeeper-3.7.1%2Fapache-zookeeper-3.7.1-bin.tar.gz%3Flogin%3Dfrom_csdn 1.1解压安装zookeeper软件…

【软考-架构】3.3、模式分解-事务并发-封锁协议

✨资料&文章更新✨ GitHub地址:https://github.com/tyronczt/system_architect 文章目录 模式分解(难点)无损分解💯考试真题并发控制封锁协议💯考试真题第一题第二题 模式分解(难点) 保持函…

审批工作流系统xFlow

WorkFlow-审批流程系统 该项目为完全开源免费项目 可用于学习或搭建初始化审批流程系统 希望有用的小伙伴记得点个免费的star gitee仓库地址 仿钉钉飞书工作审批流系统 介绍 前端技术栈: vue3 ts vite arcodesign eslint 后端技术栈:springbootspring mvc mybatis mavenmysq…

【数据结构初阶第十九节】八大排序系列(下篇)—[详细动态图解+代码解析]

hello,好久不见! 云边有个稻草人-CSDN博客 上篇内容,回顾一下吧【数据结构初阶第十八节】八大排序系列(上篇)—[详细动态图解代码解析]-CSDN博客 今天我们来学习下篇 目录 (2)快速排序 【挖坑法】 —思路 —思路…

定制开发开源 AI 智能名片 S2B2C 商城小程序源码在小程序直播营销中的应用与价值

摘要: 本文主要探讨了定制开发开源 AI 智能名片 S2B2C 商城小程序源码在小程序直播营销中的应用与价值。首先详细阐述了小程序直播的基本概念、特点、发展历程及营销意义,包括其便捷性、广泛的受众连接能力以及对企业推广的重要作用。接着深入剖析了定制…

蓝桥杯Python赛道备赛——Day3:排序算法(二)(归并排序、堆排序、桶排序)

本博客是蓝桥杯备赛系列中排序算法的第二期,包括:归并排序、堆排序和桶排序。每一个算法都在给出概念解释的同时,给出了示例代码,以供低年级师弟师妹们学习和练习。 由于本期的三个算法的复杂度相对来说要高于上一期的三个算法&am…

Type-C:智能家居的电力革命与空间美学重构

在万物互联的时代浪潮中,家居空间正经历着从功能容器到智慧终端的蜕变。当意大利设计师安东尼奥奇特里奥提出"消失的设计"理念二十年后,Type-C充电技术正以润物无声的方式重塑着现代家居的形态与内核,开启了一场静默的居住革命。 【…

第十五届蓝桥杯C/C++组:宝石组合题目(从小学奥数到编程题详解)

这道题目真的一看就不好做,如果直接暴力去做百分之90必挂掉,那么这道题目到底应该怎么去做呢?这我们就得从小学奥数开始聊了。(闲话:自从开始蓝桥杯备赛后,每天都在被小学奥数震惊,为什么我小的…

ECharts中Map(地图)样式配置、渐变色生成

前言 ECharts是我们常用的图表控件,功能特别强大,每次使用都要查API比较繁琐,这里就记录开发中常用的配置。 官网:https://echarts.apache.org/handbook/zh/get-started 配置项:https://echarts.apache.org/zh/opti…

MySQL | MySQL表的增删改查(CRUD)

目录 前言:什么是 CRUD ?一、Creat 新增1.1 语法1.2 示例1.2.1 单行数据全列插入1.2.2 单行数据指定列插入1.2.3 多行数据指定列插入 二、Retrieve 检索2.1 语法2.2 示例2.2.1 全列查询2.2.2 指定列查询2.2.3 查询字段为表达式2.2.4 结果去重查询2.2.5 where条件查…

电子电气架构 --- 分布到集中的动カ系统及基于域控制器的架构

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…

基于SpringBoot的“考研互助平台”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“考研互助平台”的设计与实现(源码数据库文档PPT) 开发语言:Java 数据库:MySQL 技术:SpringBoot 工具:IDEA/Ecilpse、Navicat、Maven 系统展示 系统整体功能图 局部E-R图 系统首页界面 系统注册…