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

最新推荐文章于 2024-08-09 11:43:11 发布
最新推荐文章于 2024-08-09 11:43:11 发布
阅读量401 收藏
点赞数
分类专栏： 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 1179
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 假设当
typescript_nodejs：commonjs和ES Module规范对比和导入导出代码实践.md
jeason_chan_zju的博客
12-24 1138
由于CSDN经常大姨妈，公司的网络也垃圾的一批，甚至GitHub的访问速度反而比CSDN更快；同时维护GitHub和CSDN很费劲。 有始有终，在此和CSDN告别，有兴趣的可以follow我https://github.com/jeasonchan，后会有期！ Go big and go home！荆轲刺秦王。 ...
利用webpack理解CommonJS和ES Modules的差异区别
11-20
前言 问： CommonJS 和 ES Modules 中模块引入的区别？ CommonJS 输出的是一个值的拷贝；ES Modules 生成一个引用，等到真的需要用到时，再到模块里面去取值，模块里面的变量，绑定其所在的模块。 我相信很多人已经把这个答案背得滚瓜烂熟，好，那继续提问。 问：CommonJS 输出的值是浅拷贝还是深拷贝？ 问：你能模拟实现 ES Modules 的引用生成吗？ 对于以上两个问题，我也是感到一脸懵逼，好在有 webpack 的帮助，作为一个打包工具，它让 ES Modules, CommonJS 的工作流程瞬间清晰明了。 准备工作 初始化项目，并安装 b
Javascript——ES6 Module 和 Common JS 模块
最新发布
weixin_45705239的博客
08-09 1068
随着 ES6 模块的推广，Node.js 也开始支持 ES6 模块，但 CommonJS 由于其长期存在和广泛使用，在 Node.js 生态中仍然非常重要。上述是两种模块系统的基本区别，但随着JavaScript生态的快速发展，一些限制和功能可能会随时间而改变。ES6模块（ECMAScript 2015模块）是JavaScript官方的模块系统，旨在标准化JavaScript中如何编写和消费模块。在ES6模块中，可以使用。该函数接受一个模块标识符（通常是文件的路径）作为参数，并返回该模块导出的内容。
CommonJs和ES Module
denglouhen的博客
11-02 194
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 1605
模块化开发是我们开发当中用于组织和管理代码的方法，它的目的是将复杂的应用程序去拆分为更小和更好管理的模块单元，从而提高代码的复用性和可维护性。在早期的前端开发中，javascript代码通常以脚本的形式直接嵌在html文件中，或者通过多个脚本文件呢去进行一个处置，那这种方式存在一些问题，比如全局命名冲突，代码复用困难，依赖关系难以管理等等，特别是在多人协作的场景下，这种情况尤为常见，直到模块化的出现才从根本上去解决这些问题，这也正是js为什么需要模块的原因。那js的模块化是什么？怎么用？
CommonJs规范和ES 模块系统
jieyucx的博客
07-05 1229
CommonJS 是一种模块化规范，用于在 JavaScript 应用程序中组织和管理代码的模块。它定义了模块的导入和导出机制，使得开发者可以将代码分割成可复用的模块，并在不同的文件中引用和使用这些模块。CommonJS 规范有以下几个主要和Node.js在开发中，我们可以使用 CommonJS 规范来创建和使用模块。下面是一个使用 CommonJS 规范的在上述代码中，我们定义了两个函数add和subtract，并使用将它们导出为模块的接口。在上述代码中，我们使用require。
webpack系列 —— 模块化原理-CommonJS
七月
05-25 1278
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 2083
文章目录一、 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
【 webpack系列（二）】一个基于CommonJS模块化方案的小demo —— 带你简单体验 webpack 打包流程
JZevin的博客
09-10 444
文章目录一. webpack基础1.1 前端模块化开发1.2 打包二. webpack初体验2.1 安装webpack2.2 创建项目目录结构2.3 npm初始化2.4 代码编写2.4.1 math.js（模块代码）2.4.2 main.js（入口文件）2.4.3 index.html（浏览器展示文件）2.5 webpack打包2.6 修改引入文件为打包输出文件三. 写在最后 一. webpack基础 webpack —— JavaScript 应用程序的静态模块打包器（module bundler）。 它
commonjs 和commonjs2 的区别，module.exports 和 exports的关系，commonjs 和 es6模块 的区别
qq_17335549的博客
09-29 986
【我不熟悉的javascript】commonjs和commonjs2的区别，module.exports和exports的关系
深入了解 Commonjs 和 Es Module
开源世界
08-09 434
一 前言 今天我们来深度分析一下 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 925
CommonJS 模块与ES模块简单了解与区别！ 用vite构建项目时，用了module.exports写法一直报错，后面了解是因为commonJS模块与ES模块区别，这里做下简单整理。
CommonJS 和 ES Module 区别
var_deng的博客
09-18 177
CommonJs CommonJs中 require可以动态加载语句，代码发生在运行时 CommonJs混合导出，还是一种语法，只不过不用声明前面对象而已，当我导出引用对象时之前的导出就被覆盖了 CommonJs导出值是浅拷贝，可以修改导出的值，这在代码出错时，不好排查引起变量污染 Es Module Es Module是静态的，import 不可以动态加载语句，只能声明在该文件的最顶部，代码发生在编译时 Es Module混合导出，单个导出，默认导出，完全互不影响 Es Module导出是引用值（存在映射
模块化：CommonJS与ES Modules详解
weixin_43206959的博客
04-28 1565
模块化：CommonJS与ES Modules的区别
什么，你还不知道 CommonJS 模块与 ES 模块的区别？
gaotlantis的博客
05-30 1080
关于CommonJS 模块与 ES 模块的区别，记住下面的三句话：CommonJS 模块输出的是值的拷贝（浅拷贝），ES 模块输出的是值的引用。当模块内部的值改变时，在外部，CommonJS 无法得到模块内部最新的值，而 ES 模块可以得到模块内部最新的值。CommonJS 模块是运行时加载，ES 模块是编译时输出接口，ES 模块的加载效率比 CommonJS 模块的高。CommonJS 模块的require()
什么是 commonjs2
兰亭古墨
07-30 392
webpackissue的回答https//github.com/webpack/webpack/issues/1114。CommonJS2有export和module.export。CommonJS只有export。
ES/CommonJS/AMD/CMD规范简单介绍
dwh444的博客
09-07 1123
ECMAScript定义了如下规范： 语言语法 – 语法解析规则、关键字、语句、声明、运算符等。 类型 – 布尔型、数字、字符串、对象等。 原型和继承。 内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。 ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在其他的标准中定义。 ECMAScript涵盖了
es、commonjs 模块解析原理
Trifling_的博客
09-20 421
基础知识点 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 指向同一内存空对象{} ， 直接赋值对象会导致引.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值