CommonJs和es6的Module的区别

JS模块化发展史
最新推荐文章于 2025-10-22 16:44:14 发布
原创 最新推荐文章于 2025-10-22 16:44:14 发布 · 1.4w 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#commonjs #es6(module)

本文回顾了JavaScript模块化的历史，从早期缺乏模块体系到社区提出CommonJS和AMD规范，再到ES6引入模块功能，旨在统一前后端模块风格。介绍了Node.js如何逐步接纳ES6模块，包括.mjs和.cjs文件扩展名的区别。

历史上，js一直没有模块(module)体系，无法将一个项目拆分成多个模块文件。正对这一情况，社区出现了一些统一的规范：CommonJs和AMD，前者是针对服务端的js，也就是nodejs。后者是针对浏览器的。ES6在语言标准层面上，实现了模块功能，而且实现也比较简单。完全可以取代CommonJs和AMD。达成前后端js的模块风格统一。不过目前还未完全达到这一目的。nodejs目前主流还是采用CommonJS规范。不过在v13.2版本，nodejs已经实现了ES6模块语法，还未正式替换，在考察阶段。v13.2版本将js文件以 .mjs结尾，nodejs将它视为ES6模块。以 .cjs结尾则视为CommonJS模块。也可以在包的package.json文件中增加 "type": "module"信息。nodejs则将整个包都视为ES6模块来加载运行。

原文搬至：https://itpika.com/2020/02/09/js/module/

 

详谈commonjs模块与es6模块的区别
11-29
到目前为止，已经实习了3个月的时间了。最近在面试，在面试题里面有题目涉及到模块循环加载的知识。趁着这个机会，将commonjs模块与es6模块之间一些重要的的区别做个总结。语法上有什么区别就不具体说了，主要谈谈引用的区别。 commonjs 对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。 对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。 当使用require命令加载某个模块时，就会运行整个模块的代码。 当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值
CommonJS 和 ES6 Module 究竟有什么区别？
qq_43623970的博客
06-27 510
CommonJS 和 ES6 Module 究竟有什么区别？ 作为前端开发者，你是否也曾有过疑惑，为什么可以代码中可以直接使用 require 方法加载模块，为什么加载第三方包的时候 Node 会知道选择哪个文件作为入口，以及常被问到的，为什么 ES6 Module export 基础数据类型的时候会有【引用类型】的效果？ 带着这些疑问和好奇，希望阅读这篇文章能解答你的疑惑。 CommonJS 规范 在 ES6 之前，ECMAScript 并没有提供代码组织的方式，那时候通常是基于 IIFE 来实现“模块化
ES6 模块与 CommonJS 模块的差异
冰雪为融的博客
05-10 4413
前面我们已经对ES6的模块化规划和CommonJs的模块化规范已经介绍过了，所以今天我们主要聊聊这两种模块化的差异，如果对这两种模块化规范不是特别了解的，可以点击ES6模块化规范和CommonJs模块化规范ES6 模块与 CommonJS 模块完全不同。它们有两个重大差异。CommonJS 输出是值的拷贝，即原来模块中的值改变不会影响已经加载的该值，ES6静态分析，动态引用，输出的是值的引用，值改...
【前端架构必修课】：彻底搞懂CommonJS的require、module和exports
最新发布
InitFlow的博客
10-22 907
掌握JavaScript CommonJS 用法，深入解析require、module和exports机制，适用于Node.js模块化开发场景。讲解同步加载、依赖管理与模块隔离优势，帮助前端开发者构建可维护架构。原理清晰、案例实用，值得收藏。
CommonJS 和 ES6 Module的区别
2301_81192892的博客
03-09 345
【代码】CommonJS 和 ES6 Module的区别。
CommonJS 与 ES6 Module 的区别
qq_40410916的博客
09-07 437
这两者的主要区别主要有以下两点： 对于模块的依赖，CommonJS是动态的，ES6 Module 是静态的 CommonJS导入的是值的拷贝，ES6 Module导入的是值的引用 区别一 对于模块的依赖，何为动态？何为静态？ 动态是指对于模块的依赖关系建立在代码执行阶段； 静态是指对于模块的依赖关系建立在代码编译阶段； CommonJS导入时，require 的路径参数是支持表达式的，例如 // A.js let fileName = 'example.js' const bModule = require
开发 面试_2020Web前端高频面试题全解析-Web前端开发面试题
weixin_34752204的博客
01-10 245
Web前端面试,Web前端开发面试题,开课吧Web前端问题1：common.js和es6中模块引入的区别？解析：CommonJS 是一种模块规范，最初被应用于 Nodejs，成为 Nodejs 的模块规范。运行在浏览器端的JavaScript 由于也缺少类似的规范，在 ES6 出来之前，前端也实现了一套相同的模块规范 (例如: AMD)，用来对前端模块进行管理。自 ES6 起，引入了一套新的 ES...
小红书前端一面:webpack的摇树对commonjs和es6 module都生效吗，讲讲原理是什么？
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
11-10 384
Tree Shaking 本质上是一个死代码消除技术，依赖于 ES6 模块系统的静态结构。在 ES6 中，模块的依赖关系可以在编译时确定，Webpack 能够在打包时分析出哪些模块和函数未被使用，从而将这些代码移除。这个过程犹如“摇树”，将没有使用的“枯枝”（无用代码）摇落，以便只打包真正被用到的“树叶”（有用代码）。Tree Shaking 是一种通过移除未使用代码来优化打包体积的技术。Webpack 的 Tree Shaking 主要依赖于 ES6 模块的静态特性，因此对 CommonJS 模块不生效。
CommonJS和ES6模块规范有何区别
yiguoxiaohai的博客
08-20 1018
CommonJS和ES6模块规范有何区别。CommonJS 和 ES6 模块系统是 JavaScript 中两种主要的模块处理方式。它们在语法、加载方式和使用场景上都有显著的区别。
CommonJs和ES6模块区别，项目中的运用差距
有事儿私信。
12-04 1194
CommonJS 和 ES6 模块是 JavaScript 中两种不同的模块系统。它们有一些区别，尤其在实际应用中的使用上有一些差异。
CommonJS和ES6模块的区别
04-01
通过对比CommonJS和ES6模块的区别，我们可以看出两者的设计哲学存在明显差异。CommonJS更多地考虑了运行时的行为，而ES6模块则更注重静态分析和代码优化。在实际开发中，选择哪种模块化方案取决于项目的特定需求和...
CommonJs和ES6 module的区别是什么呢？
kafeiweiguoguo的博客
10-13 212
CommonJS 是一种模块规范，最初被应用于 Nodejs，成为 Nodejs 的模块规范。 运行在浏览器端的 JavaScript 由于也缺少类似的规范，在 ES6 出来之前，前端也实现了一套相同的模块规范 (例如: AMD)，用来对前端模块进行管理。 自 ES6 起，引入了一套新的 ES6 Module 规范，在语言标准的层面上实现了模块功能，而且实现得相当简单，有望成为浏览器和服务器通用的模块解决方案。但目前浏览器对 ES6 Module 兼容还不太好，我们平时在 Webpack 中使用的 ex
CommonJS与ES6Module的区别
wdhxs的博客
09-04 437
不同点 1.使用CommonJS引用的变量可以修改，若是引用类型变量，会影响到被引用模块的值。ES6模块中引用的值为只读模式，不可修改（但可以修改对象类型的属性）。 2.require属于运行时加载，只有当代码在运行的时候才会得到引用的对象，导致完全没办法在编译时做“静态优化”；import属于编译时加载，即 ES6 可以在编译时就完成模块加载。 3.ES6模块中，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。 相同点 require和import都会执行引
CommonJS模块与ES6模块及区别
AI_huihui的博客
11-18 2322
CommonJS模块和ES6模块 在ES6之前，js本没有模块体系之说，最主要使用的是CommonJS和AMD两种。前者用于服务器，后者用于浏览器，ES6后在语言标准的层面上实现了模块功能，使用简单，称为浏览器和服务器通用的模块解决方案。 CommonJS模块化规范 Node.js 遵循了 CommonJS 模块化规范，CommonJS 规定了模块的特性和各模块之间如何相互依赖，规定每个模块内部，规定 module 变量代表当前模块，module 变量是一个对象，它的 ...
CommonJS和ES6模块有什么区别
weixin_50786692的博客
01-01 1595
commonjs和esmodule有什么区别
CommonJs与es6 module的区别
MichelleZhai的博客
01-17 1149
之前总是对模块机制类的内容走马观花，知其一不知其二，只了解AMD\CMD\Common.js很表面的知识，今天看到一篇大佬的文章，总结的很好，做个笔记以后方便查阅。 主流模块规范 1. UMD 2. CommonJs 3. es6 module 1. umd 模块（通用模块） (function (global,factory){ typeof exports ==='obje...
.什么是模块化开发?CommonJS和ES6 Module 的区别是什么?
04-08
模块化开发是一种将代码划分为独立、可重用的模块的开发方式。CommonJS和ES6 Module都是用于JavaScript模块化开发的规范，它们的区别在于：CommonJS是同步加载模块，适用于服务器端开发，而ES6 Module是异步加载模块，适用于浏览器端开发。此外，ES6 Module支持静态引入和动态引入，使得模块的使用更加灵活。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值