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.rhkb.cn/news/34251.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI芯片设计

目的:未来的时代,一定会是AI的时代,那么,AI时代的三个重要组成部分,我要参与其中之一! 参考视频:AI芯片设计第一讲_哔哩哔哩_bilibili 端处理 云端

动手学深度学习:CNN和LeNet

前言 该篇文章记述从零如何实现CNN,以及LeNet对于之前数据集分类的提升效果。 从零实现卷积核 import torch def conv2d(X,k):h,wk.shapeYtorch.zeros((X.shape[0]-h1,X.shape[1]-w1))for i in range(Y.shape[0]):for j in range(Y.shape[1]):Y[i,j](X[i:ih,j:jw…

【开源代码解读】AI检索系统R1-Searcher通过强化学习RL激励大模型LLM的搜索能力

关于R1-Searcher的报告: 第一章:引言 - AI检索系统的技术演进与R1-Searcher的创新定位 1.1 信息检索技术的范式转移 在数字化时代爆发式增长的数据洪流中,信息检索系统正经历从传统关键词匹配到语义理解驱动的根本性变革。根据IDC的统计…

使用Node的http模块创建web服务,给客户端返回html页面时,css失效的根本原因(有助于理解http)

最近正在尝试使用node写后端,使用node创建http服务的时候,碰到了这样的一个问题: 这是我的源代码: import { createServer } from http import { join, dirname, extname } from path import { fileURLToPath } from url import…

JVM 2015/3/15

定义:Java Virtual Machine -java程序的运行环境(java二进制字节码的运行环境) 好处: 一次编写,到处运行 自动内存管理,垃圾回收 数组下标越界检测 多态 比较:jvm/jre/jdk 常见的JVM&…

IP风险度自检,互联网的安全“指南针”

IP地址就像我们的网络“身份证”,而IP风险度则是衡量这个“身份证”安全性的重要指标。它关乎着我们的隐私保护、账号安全以及网络体验,今天就让我们一起深入了解一下IP风险度。 什么是IP风险度 IP风险度是指一个IP地址可能暴露用户真实身份或被网络平台…

【鸿蒙】封装日志工具类 ohos.hilog打印日志

封装一个ohos.hilog打印日志 首先要了解hilog四大日志类型: info、debug、warm、error 方法中四个参数的作用 domain: number tag: string format: string ...args: any[ ] 实例: //普通的info日志,使用info方法来打印 //第一个参数 : 0x0…

走路碎步营养补充贴士

走路碎步,这种步伐不稳的现象,在日常生活中并不罕见,特别是对于一些老年人或身体较为虚弱的人来说,更是一种常见的行走状态。然而,这种现象可能不仅仅是肌肉或骨骼的问题,它还可能是身体在向我们发出营养缺…

Python软件和搭建运行环境

目录 一、Python安装全流程(Windows/Mac/Linux) 1. 下载官方安装包 2. 详细安装步骤(以Windows为例) 3. 环境变量配置(Mac/Linux) 二、虚拟环境管理(关键!) 为什么需…

【蓝桥杯】省赛:神奇闹钟

思路 python做这题很简单,灵活用datetime库即可 code import os import sys# 请在此输入您的代码 import datetimestart datetime.datetime(1970,1,1,0,0,0) for _ in range(int(input())):ls input().split()end datetime.datetime.strptime(ls[0]ls[1],&quo…

RabbitMQ (Java)学习笔记

目录 一、概述 ①核心组件 ②工作原理 ③优势 ④应用场景 二、入门 1、docker 安装 MQ 2、Spring AMQP 3、代码实现 pom 依赖 配置RabbitMQ服务端信息 发送消息 接收消息 三、基础 work Queue 案例 消费者消息推送限制(解决消息堆积方案之一&#…

HW基本的sql流量分析和wireshark 的基本使用

前言 HW初级的主要任务就是看监控(流量) 这个时候就需要我们 了解各种漏洞流量数据包的信息 还有就是我们守护的是内网环境 所以很多的攻击都是 sql注入 和 webshell上传 (我们不管对面是怎么拿到网站的最高权限的 我们是需要指出它是…

camellia redis proxy v1.3.3对redis主从进行读写分离(非写死,自动识别故障转移)

1 概述 camellia-redis-proxy是一款高性能的redis代理(https://github.com/netease-im/camellia),使用netty4开发,主要特性如下: 支持代理到redis-standalone、redis-sentinel、redis-cluster。支持其他proxy作为后端…

贪吃蛇小游戏-简单开发版

一、需求 本项目旨在开发一个经典的贪吃蛇游戏,用户可以通过键盘控制蛇的移动方向,让蛇吃掉随机出现在游戏区域内的食物,每吃掉一个食物,蛇的身体长度就会增加,同时得分也会相应提高。游戏结束的条件为蛇撞到游戏区域的…

使用 Docker 部署前端项目全攻略

文章目录 1. Docker 基础概念1.1 核心组件1.2 Docker 工作流程 2. 环境准备2.1 安装 Docker2.2 验证安装 3. 项目配置3.1 项目结构3.2 创建 Dockerfile 4. 构建与运行4.1 构建镜像4.2 运行容器4.3 访问应用 5. 使用 Docker Compose5.1 创建 docker-compose.yml5.2 启动服务5.3 …

接口自动化测试用例

Post接口自动化测试用例 Post方式的接口是上传接口,需要对接口头部进行封装,所以没有办法在浏览器下直接调用,但是可以用Curl命令的-d参数传递接口需要的参数。当然我们还以众筹网的登录接口为例,讲解post方式接口的自动化测试用…

使用WireShark解密https流量

概述 https协议是在http协议的基础上,使用TLS协议对http数据进行了加密,使得网络通信更加安全。一般情况下,使用WireShark抓取的https流量,数据都是加密的,无法直接查看。但是可以通过以下两种方法,解密抓…

阿里百炼Spring AI Alibaba

文章目录 学习链接阿里百炼创建api-key查看api调用示例示例pom.xmlAQuickStartMultiChatStreamChat Spring AI Alibaba简单示例pom.xmlapplication.ymlHelloworldControllerDashScopeChatModelController图解spring AI的结构 deepseekpom.xmlapplication.ymlDeepSeekChatClient…

【模拟算法】

目录 替换所有的问号 提莫攻击 Z 字形变换 外观数列 数青蛙(较难) 模拟算法:比葫芦画瓢。思路较简单,考察代码能力。 1. 模拟算法流程,一定要在演草纸上过一遍流程 2. 把流程转化为代码 替换所有的问号 1576. 替…

【Linux】进程(1)进程概念和进程状态

🌟🌟作者主页:ephemerals__ 🌟🌟所属专栏:Linux 目录 前言 一、什么是进程 二、task_struct的内容 三、Linux下进程基本操作 四、父进程和子进程 1. 用fork函数创建子进程 五、进程状态 1. 三种重…