「Node.js」ESModule 与 CommonJS 的 区别

news2024/11/17 3:29:50

前言

Node.js支持两种模块系统:CommonJS 和 ESModules(ESM),它们在语法和功能上有一些不同。
在这里插入图片描述

CommonJS (CJS)

CommonJS 是 Node.js 最早支持的模块规范,由于它的出现在ES6之前,因此采取的是同步加载模块的方式。这在服务端是可接受的,因为文件都在本地,同步加载不会引起明显的延迟问题。但是这样的加载方式不适合用在客户端,因为它会导致浏览器在等待模块下载和解析的期间挂起。

  • CommonJS 通过 require 函数来导入模块,如 const module = require('module_name')
  • 模块导出使用 module.exports 对象,如 module.exports = valueexports.value = value

ESModules (ESM)

ESModules 是ES6引入的官方标准化模块系统,支持静态导入和导出。静态模块结构允许JavaScript引擎优化加载和解析。

  • 使用 import 关键字导入模块,例如 import { something } from 'module_name'
  • 使用 export 关键字导出模块,例如 export function doSomething() { ... }export default class MyClass{ ... }

ESModules设计为可以异步加载,这使其更适合于用在浏览器环境中,不过Node.js现在也支持ESModules。

区别

  1. 加载机制:

    • CommonJS:同步加载。
    • ESModules:可以异步加载,支持静态分析,预测性地进行代码的分割和按需加载。
  2. 模块解析:

    • CommonJS 中,require 路径解析算法基于文件系统运作,并且可以省略文件后缀或指向文件夹。
    • ESModules 使用更为严格的路径,通常需要文件后缀,遵循 URL 语法。
  3. 导出值:

    • CommonJS 导出的是值的拷贝,也就是说,一旦 require() 执行完毕,模块内部的变化不会影响这个值。
    • ESModules 导出的是绑定的引用,模块外部能够实时观察到模块内部的变化。
  4. 模块上下文:

    • CommonJS 每个文件都是其模块的顶层作用域。
    • ESModules 顶层 thisundefined

应用场景

CommonJS 和 ESModules 由于它们各自的特点,在不同的应用场景下会有所偏好。下面列举了它们的典型应用场景:

CommonJS 的应用场景:
  • Node.js服务端开发:由于服务端代码不需要考虑浏览器端的下载和延迟问题,CommonJS 的同步加载特性在服务端是完全可行的。同时,绝大多数Node.js的生态系统(npm上的包)都是基于CommonJS规范的。
  • 旧项目维护:早期的Node.js项目都是基于CommonJS规范的,所以维护旧项目往往意味着继续使用CommonJS。
  • 需要动态计算或条件加载模块的情况:由于CommonJS 支持运行时同步加载,你可以根据某些运行时计算的条件来要求模块。
ESModules 的应用场景:
  • 现代化前端开发:如使用框架(例如React、Vue、Angular)和工具(如Webpack、Rollup、Parcel)构建项目。ESModules 支持动态导入(import())和静态代码分析,这有利于前端工具进行代码拆分,以懒加载的方式优化应用加载性能。
  • 跨环境的代码共享:比如同时在Node.js和现代浏览器中运行的库或工具。ESModules是JavaScript官方的模块系统,现代浏览器原生支持。
  • 新项目开发:创建新的Node.js项目时,倾向于使用ESModules,因为它是ECMAScript规范的一部分,并且Node.js及其生态系统正在向ESModules过渡。
  • 需要利用静态分析来进行Tree-shaking优化的项目:Tree-shaking是一种只打包必要模块代码的方法,它依赖于ESModules的静态结构。
混合场景:
  • 迁移的项目:如果你的项目计划从CommonJS迁移到ESModules,你可能会临时进入混合状态,这时要注意不同模块系统间的互操作。
  • 使用第三方库:当需要在ESModules项目中使用仅提供CommonJS模块的第三方库时,也会出现混合使用。

Node.js已经提供了某些语法糖和特性来平滑CommonJS到ESModules的过渡,如import()动态导入语法来异步加载CommonJS模块等。

选择使用CommonJS还是ESModules很大程度上依赖于项目的目标环境、工具链支持、代码库的现状以及个人或团队的偏好。随着技术演进,社区正在向ESModules靠拢,但在稳定性、交付和兼容性要求很高的情况下,CommonJS仍然是一个合理而且可靠的选择。

使用示例

CommonJS

导出示例:

// myModule.js
const myFunction = () => {
    console.log('Hello, CommonJS!');
}
// 给exports对象添加属性
exports.myFunction = myFunction;

导入示例:

// app.js
const myModule = require('./myModule.js');
myModule.myFunction(); // 输出: 'Hello, CommonJS!'
ESModules

导出示例:

// myModule.js
export const myFunction = () => {
    console.log('Hello, ESModules!');
}

导入示例:

// app.js
import { myFunction } from './myModule.js';
myFunction(); // 输出: 'Hello, ESModules!'

此外,下面的示例说明了CommonJS如何在运行时加载模块,而ESModules则在编译时加载模块。

CommonJS 运行时加载
// 假设我们在运行代码之前并不知道我们需要加载的模块版本,我们可以在运行时动态地确定。
let version = 'v1';
if (someCondition) {
    version = 'v2';
}
const module = require(`./module${version}.js`);
ESModules 编译时加载
// 在ESModules中,不能这样动态加载模块,因为所有的import都会在编译时被处理。
// 下面的代码无法运行,会提示错误。
let version = 'v1';
if (someCondition) {
    version = 'v2';
}
// 报错
import module from `./module${version}.js`;
ESModules 动态加载

但是,ESModules 提供了一种动态导入的方法,可以在运行时异步加载模块:

let version = 'v1';
if (someCondition) {
    version = 'v2';
}
import(`./module${version}.js`) 
    .then(module => {
        // 使用模块
    })
    .catch(err => {
        // 处理加载错误
    });

在这个例子中,import() 返回一个 Promise,加载完模块后会被解析,因此动态导入必须在 Promise 或 async/await 上下文中处理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1643058.html

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

相关文章

Linux Ubuntu 开机自启动浏览器

终端输入命令:gnome-session-properties 打开启动设置 如果提示:Command ‘gnome-session-properties’ not found, but can be installed with: apt install gnome-startup-applications 则执行:apt install gnome-startup-applications安装…

用pyecharts完成综合案例之全球GDP动态可视化统计图

综合案例之全球GDP 所用csv文档下载链接如下:https://download.csdn.net/download/qq_42707739/12621102?ops_request_misc%257B%2522request%255Fid%2522%253A%2522171488482816800184124883%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fdownloa…

机器学习周报第40周

目录 摘要Abstract一、文献阅读1.1 摘要1.2 论文背景1.3 论文模型1.3.1 模型概述1.3.2 模型细节 1.4 模型精度 二、论文代码2.1 rtdetr.py2.2 backbone模块2.3 AIFI2.4 CCFM 总结 摘要 本周,我深入研读了RT-DETR(实时目标检测变换器)论文&am…

【数据结构】初识数据结构

引入: 哈喽大家好,我是野生的编程萌新,首先感谢大家的观看。数据结构的学习者大多有这样的想法:数据结构很重要,一定要学好,但数据结构比较抽象,有些算法理解起来很困难,学的很累。我…

中仕公考:哪些情况不能考公务员?

1.年龄不符合 主要分两类【一类是未成年人,另一类是超龄人员】 具体来讲:年龄一般为18周岁以上、35周岁以下 (2024国考标准是1987年10月至2005年10月期间出生) 对于2024年应届硕士、博士研究生(非在职人员)放宽到40周岁以下(2024国考标准是1982年10月以后…

【Conda】解决使用清华源创建虚拟环境不成功问题

文章目录 问题描述:清华源创建不成功解决步骤1 添加官方源步骤2 删除C:/user/你的用户名/的 .condarc 文件步骤3 再次创建 问题描述:清华源创建不成功 本地配置了清华源,但是在创建虚拟环境时不成功,报错如下。 图片若看不清&…

Docker使用进阶篇

文章目录 1 前言2 使用Docker安装常用镜像示例2.1 Docker安装RabbitMQ2.2 Docker安装Nacos2.3 Docker安装xxl-job(推荐该方式构建)2.4 Docker安装redis2.5 Docker安装mysql 1 前言 上一篇介绍了Docker的基础概念,带你 入门Docker&#xff0c…

初识webpack项目

新建一个空的工程 -> % mkdir webpack-project 为了方便追踪执行每一个命令,最终产生了哪些变更,将这个空工程初始化成git项目 -> % cd webpack-project/-> % git init Initialized empty Git repository in /Users/lixiang/frontworkspace/…

STM32微秒级别延时--F407--TIM1

基本配置: TIM1挂载在APB2总线上,150MHz经过15分频,得到10MHz计数频率,由于disable了自动重装载,所以只需要看下一次计数值是多少即可。 void TIM1_Delay_us(uint16_t us) //使用阻塞方式进行延时,ARR值不…

Colibri for Mac v2.2.0激活版:专业级无损音乐播放器

Colibri for Mac是一款专为Mac用户设计的高分辨率无损音乐播放器。它基于BASS技术构建,为用户带来极致的音频体验。Colibri支持所有流行的无损和有损音频格式,如FLAC、MP3、AAC等,确保音乐播放的清晰度和完美度。其独特的清晰比特完美播放技术…

hadoop学习---基于Hive的教育平台数据仓库分析案例(一)

案例背景: 大数据技术的应用可以从海量的用户行为数据中进行挖掘分析,根据分析结果优化平台的服务质量,最终满足用户的需求。教育大数据分析平台项目就是将大数据技术应用于教育培训领域,为企业经营提供数据支撑。 案例数据产生流…

华为鸿蒙系统(Huawei HarmonyOS)

华为鸿蒙系统(华为技术有限公司开发的分布式操作系统) 华为鸿蒙系统(HUAWEI HarmonyOS),是华为公司在2019年8月9日于东莞举行的华为开发者大会(HDC.2019)上正式发布的分布式操作系统。 华为鸿蒙…

贪心-耍杂技的牛

问题描述 农民约翰的 N头奶牛(编号为 1…N)计划逃跑并加入马戏团,为此它们决定练习表演杂技。 奶牛们不是非常有创意,只提出了一个杂技表演: 叠罗汉,表演时,奶牛们站在彼此的身上,形…

深入学习和理解Django视图层:处理请求与响应

title: 深入学习和理解Django视图层:处理请求与响应 date: 2024/5/4 17:47:55 updated: 2024/5/4 17:47:55 categories: 后端开发 tags: Django请求处理响应生成模板渲染表单处理中间件异常处理 第一章:Django框架概述 1.1 什么是Django?…

音视频开发之旅——实现录音器、音频格式转换器和播放器(PCM文件转换为WAV文件、使用LAME编码MP3文件)(Android)

本文主要讲解的是实现录音器、音频转换器和播放器,在实现过程中需要把PCM文件转换为WAV文件,同时需要使用上一篇文章交叉编译出来的LAME库编码MP3文件。本文基于Android平台,示例代码如下所示: AndroidAudioDemo Android系列&am…

OpenAI下周将发布ChatGPT搜索引擎,挑战谷歌搜索!

目前,多方位消息证实,OpenAI将会在5月9日上午10点公布该消息,大约是北京时间周五的凌晨2点。 5月3日,前Mila研究员、麻省理工讲师Lior S爆料,根据OpenAI最新的SSL证书日志显示,已经创建了search.chatgpt.c…

数据库开发关键之与DQL查询语句有关的两个案例

案例 案例1 条件分页查询 查看项目经理提供给我们的需求文档 模糊匹配的含义是 只要包含"张"就可以 use dduo;-- 按照需求完成员工管理的条件分页查询 根据输入条件 查询第一页的数据 每页展示10条记录 -- 输入条件: -- 姓名: 张 -- 年龄&…

基于Java+SpringBoot+Vue前后端分离音乐播放器系统设计与实现(有视频讲解)

博主介绍:✌全网粉丝5W,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验…

统一大型语言模型和知识图谱:路线图

【摘要】 大型语言模型(LLM),如ChatGPT和GPT4,由于其涌现能力和泛化性,正在自然语言处理和人工智能领域掀起新的浪潮。然而,LLM是黑箱模型,通常无法捕捉和获取事实知识。相反,知识图…