「Node.js」ESModule 与 CommonJS 的 区别

2024-05-05 02:52
文章标签 js 区别 node commonjs esmodule

本文主要是介绍「Node.js」ESModule 与 CommonJS 的 区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

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 上下文中处理。

这篇关于「Node.js」ESModule 与 CommonJS 的 区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,:本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1:Kotlin 如何解决 Java 的 NullPointerExceptio

Linux中的more 和 less区别对比分析

《Linux中的more和less区别对比分析》在Linux/Unix系统中,more和less都是用于分页查看文本文件的命令,但less是more的增强版,功能更强大,:本文主要介绍Linu... 目录1. 基础功能对比2. 常用操作对比less 的操作3. 实际使用示例4. 为什么推荐 less?5.

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

Java 关键字transient与注解@Transient的区别用途解析

《Java关键字transient与注解@Transient的区别用途解析》在Java中,transient是一个关键字,用于声明一个字段不会被序列化,这篇文章给大家介绍了Java关键字transi... 在Java中,transient 是一个关键字,用于声明一个字段不会被序列化。当一个对象被序列化时,被

解读@ConfigurationProperties和@value的区别

《解读@ConfigurationProperties和@value的区别》:本文主要介绍@ConfigurationProperties和@value的区别及说明,具有很好的参考价值,希望对大家... 目录1. 功能对比2. 使用场景对比@ConfigurationProperties@Value3. 核

Spring Boot拦截器Interceptor与过滤器Filter深度解析(区别、实现与实战指南)

《SpringBoot拦截器Interceptor与过滤器Filter深度解析(区别、实现与实战指南)》:本文主要介绍SpringBoot拦截器Interceptor与过滤器Filter深度解析... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现与实

关于Mybatis和JDBC的使用及区别

《关于Mybatis和JDBC的使用及区别》:本文主要介绍关于Mybatis和JDBC的使用及区别,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、JDBC1.1、流程1.2、优缺点2、MyBATis2.1、执行流程2.2、使用2.3、实现方式1、XML配置文件

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no

exfat和ntfs哪个好? U盘格式化选择NTFS与exFAT的详细区别对比

《exfat和ntfs哪个好?U盘格式化选择NTFS与exFAT的详细区别对比》exFAT和NTFS是两种常见的文件系统,它们各自具有独特的优势和适用场景,以下是关于exFAT和NTFS的详细对比... 无论你是刚入手了内置 SSD 还是便携式移动硬盘或 U 盘,都需要先将它格式化成电脑或设备能够识别的「文

什么是ReFS 文件系统? ntfs和refs的优缺点区别介绍

《什么是ReFS文件系统?ntfs和refs的优缺点区别介绍》最近有用户在Win11Insider的安装界面中发现,可以使用ReFS来格式化硬盘,这是不是意味着,ReFS有望在未来成为W... 数十年以来,Windows 系统一直将 NTFS 作为「内置硬盘」的默认文件系统。不过近些年来,微软还在研发一款名