模块化规范类型——很火的commonjs和Es Module

最新推荐文章于 2024-08-08 11:49:57 发布
最新推荐文章于 2024-08-08 11:49:57 发布
阅读量408 收藏
点赞数
分类专栏： Webpack JS 文章标签： javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40029828/article/details/119839271
版权
本文介绍了模块化的出现及其解决的问题，深入探讨了CommonJS、ES Module、AMD、CMD和UMD等模块化规范，特别强调了它们之间的区别和应用场景。在实际开发中，CommonJS常用于服务端，而ES Module更适合浏览器环境。Webpack作为现代前端打包工具，能够处理不同模块格式，并提供了多种输出配置。通过分析不同打包结果，有助于更好地理解和运用模块化技术。
摘要由CSDN通过智能技术生成

模块化的出现

为了解决的问题——相对于script标签引入的js文件
变量污染问题，每个文件都是独立的作用域，所以不存在变量污染——js文件作用域都是顶层，这会造成变量污染
代码维护问题，一个文件里代码非常清晰
文件依赖问题，一个文件里可以清楚的看到依赖了那些其它文件

模块化的规范

commonjs

module.exports导出变量及函数，也可以导出任意类型的值，require语法导入。
exports导出的值是值的拷贝，用解构拿到单个值
支持动态导入，代码发生在运行时指
顶层的this指向这个模块本身
require第一次加载某个模块时，Node会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的module.exports属性
——基于服务端使用而生，同步执行，不适合客户端运行。浏览器端模块都放在服务器端，等待时间取决于网速的快慢，可能会阻塞。而服务器端所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间
node加载：

// a.js
module.exports = {
   name:
最低0.47元/天 解锁文章
大名张无忌
关注
专栏目录
4.Node项目如何支持ES Module，即：CommonJs中如何支持ES Module
2024路在何方
06-15 1189
4.Node项目如何支持ES Module，即：CommonJs中如何支持ES Module 1. 模块化的发展历程（由先到后）: CMD/AMD/require.js CommonJS 用require()加载模块，用module.exports/exports.x来输出模块 ES Module 用import加载模块，用export default/export来输出 2. CommonJS中使用ES Module防范 方案一：利用webpack打包编译成commonJs 假设当
一文搞懂 JavaScript 模块化规范：CommonJS、AMD、ES6 Module
最新发布
Allen-
09-02 2487
在现代 JavaScript 开发中，模块化是提升代码组织性和可维护性的关键。本文深入解析三种主流的模块化规范——CommonJS、AMD 和 ES6 Module。
利用webpack理解CommonJS和ES Modules的差异区别
11-20
前言 问： CommonJS 和 ES Modules 中模块引入的区别？ CommonJS 输出的是一个值的拷贝；ES Modules 生成一个引用，等到真的需要用到时，再到模块里面去取值，模块里面的变量，绑定其所在的模块。 我相信很多人已经把这个答案背得滚瓜烂熟，好，那继续提问。 问：CommonJS 输出的值是浅拷贝还是深拷贝？ 问：你能模拟实现 ES Modules 的引用生成吗？ 对于以上两个问题，我也是感到一脸懵逼，好在有 webpack 的帮助，作为一个打包工具，它让 ES Modules, CommonJS 的工作流程瞬间清晰明了。 准备工作 初始化项目，并安装 b
CommonJs和ES Module
denglouhen的博客
11-02 208
commonJs实现原理： 编译过程中将导出的代码js进行首尾包装进一个函数内： function wrapper (script) { return '(function (exports, require, module, __filename, __dirname) {' + script + '\n})' } 模块加载的时候通过runInThisContext执行modulefunction，传入require那些参数。 在使用require引入的时候，r
前端模块化（commonJs、ES Module）
weijia_kmy的博客
05-18 1681
模块化开发是我们开发当中用于组织和管理代码的方法，它的目的是将复杂的应用程序去拆分为更小和更好管理的模块单元，从而提高代码的复用性和可维护性。在早期的前端开发中，javascript代码通常以脚本的形式直接嵌在html文件中，或者通过多个脚本文件呢去进行一个处置，那这种方式存在一些问题，比如全局命名冲突，代码复用困难，依赖关系难以管理等等，特别是在多人协作的场景下，这种情况尤为常见，直到模块化的出现才从根本上去解决这些问题，这也正是js为什么需要模块的原因。那js的模块化是什么？怎么用？
CommonJs规范和ES 模块系统
jieyucx的博客
07-05 1258
CommonJS 是一种模块化规范，用于在 JavaScript 应用程序中组织和管理代码的模块。它定义了模块的导入和导出机制，使得开发者可以将代码分割成可复用的模块，并在不同的文件中引用和使用这些模块。CommonJS 规范有以下几个主要和Node.js在开发中，我们可以使用 CommonJS 规范来创建和使用模块。下面是一个使用 CommonJS 规范的在上述代码中，我们定义了两个函数add和subtract，并使用将它们导出为模块的接口。在上述代码中，我们使用require。
typescript_nodejs：commonjs和ES Module规范对比和导入导出代码实践.md
jeason_chan_zju的博客
12-24 1149
由于CSDN经常大姨妈，公司的网络也垃圾的一批，甚至GitHub的访问速度反而比CSDN更快；同时维护GitHub和CSDN很费劲。 有始有终，在此和CSDN告别，有兴趣的可以follow我https://github.com/jeasonchan，后会有期！ Go big and go home！荆轲刺秦王。 ...
webpack系列 —— 模块化原理-CommonJS
七月
05-25 1285
webpack是基于node.js开发的，而node.js开发的模块化规范是commonJS. webpack npm node之间关系？ webpack是npm生态中的一个模块，我们可以通过全局安装webpack来使用webpack对项目进行打包； webpack的运行依赖于node的环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静态资源和后台没有关系，也就是说不依赖与node，只要有后台能力的都可以部署项目 npm是于Node社区中产生的，是nodejs的官..
JavaScript学习总结(二)——Module模式（CommonJS）
new_start_2018的博客
07-02 2098
文章目录一、 Module模式的基础1. 经典Module模式2.Revealing Module（揭示模块）模式3. Singleton（单例）模式二、Module模式的实现1.CommonJS模块1.1 NodeJS简介1.2 NodeJS中CommonJS的介绍1.2.1 Module对象1.2.2 require()函数的介绍1.2.3 CommonJS中模块的循环加载1.2.4 编写CommonJS模块2. ECMAScript 6中的模块2.1 基本语法2.2 ES6模块的特点2.2.1 ES6
commonjs 和commonjs2 的区别，module.exports 和 exports的关系，commonjs 和 es6模块 的区别
qq_17335549的博客
09-29 1005
【我不熟悉的javascript】commonjs和commonjs2的区别，module.exports和exports的关系
深入了解 Commonjs 和 Es Module
开源世界
08-09 442
一 前言 今天我们来深度分析一下 Commonjs 和 Es Module，希望通过本文的学习，能够让大家彻底明白 Commonjs 和 Es Module 原理，能够一次性搞定面试中遇到的大部分有关 Commonjs 和 Es Module 的问题。 老规矩我们带上疑问开始今天的分析????????????： 1 Commonjs 和 Es Module 有什么区别 ？ 2 Commonjs 如何解决的循环引用问题 ？ 3 既然有了 exports，为何又出了 module.exports ? 既生瑜，何
CommonJS-模块与ES模块简单了解与区别
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
04-29 934
CommonJS 模块与ES模块简单了解与区别！ 用vite构建项目时，用了module.exports写法一直报错，后面了解是因为commonJS模块与ES模块区别，这里做下简单整理。
CommonJS 和 ES Module 区别
var_deng的博客
09-18 183
CommonJs CommonJs中 require可以动态加载语句，代码发生在运行时 CommonJs混合导出，还是一种语法，只不过不用声明前面对象而已，当我导出引用对象时之前的导出就被覆盖了 CommonJs导出值是浅拷贝，可以修改导出的值，这在代码出错时，不好排查引起变量污染 Es Module Es Module是静态的，import 不可以动态加载语句，只能声明在该文件的最顶部，代码发生在编译时 Es Module混合导出，单个导出，默认导出，完全互不影响 Es Module导出是引用值（存在映射
模块化：CommonJS与ES Modules详解
weixin_43206959的博客
04-28 1579
模块化：CommonJS与ES Modules的区别
什么，你还不知道 CommonJS 模块与 ES 模块的区别？
gaotlantis的博客
05-30 1122
关于CommonJS 模块与 ES 模块的区别，记住下面的三句话：CommonJS 模块输出的是值的拷贝（浅拷贝），ES 模块输出的是值的引用。当模块内部的值改变时，在外部，CommonJS 无法得到模块内部最新的值，而 ES 模块可以得到模块内部最新的值。CommonJS 模块是运行时加载，ES 模块是编译时输出接口，ES 模块的加载效率比 CommonJS 模块的高。CommonJS 模块的require()
什么是 commonjs2
兰亭古墨
07-30 396
webpackissue的回答https//github.com/webpack/webpack/issues/1114。CommonJS2有export和module.export。CommonJS只有export。
前端必知之：前端模块化的CommonJS规范和ES Module规范详解
肥晨开发的学习之路
08-08 984
在当前目录下的 node_modules 目录查找。向上级目录逐级查找，直至根目录。查找 package.json 中的 main 属性指定的入口文件。默认文件名查找（index.js、index.json、index.node）。以下是一个简单的自定义模块查找流程示意图：在这个示例中，如果要加载模块A，Node.js 会首先在当前目录下的中找到对应的模块文件或者中指定的入口文件。如果未找到，则向上逐级查找，直至根目录。在当前目录下的 node_modules 目录查找。
ES/CommonJS/AMD/CMD规范简单介绍
dwh444的博客
09-07 1130
ECMAScript定义了如下规范： 语言语法 – 语法解析规则、关键字、语句、声明、运算符等。 类型 – 布尔型、数字、字符串、对象等。 原型和继承。 内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。 ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在其他的标准中定义。 ECMAScript涵盖了
es、commonjs 模块解析原理
Trifling_的博客
09-20 424
基础知识点 es6 1、export {}. 必须要手动指定import {a、b} 或者 import * as all from 2、default 提供匿名export ， import res 可以随意命名 3、import 不加{} 则是导入默认export default， 加了{}则必须在导出export {} 文件中指定具体导出 4、import() 动态导入 commonjs 1、module.exports exports 指向同一内存空对象{} ， 直接赋值对象会导致引.
模块化：CommonJS与ESModule详解
"关于笔记的Markdown文件，涵盖了CommonJS和ESModule模块化的知识，以及打包工具Browserify、Babel的使用和Webpack的初体验流程" 在编程中，模块化是一种组织代码的方式，它允许我们将复杂的程序分解为可重用和独立...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值