前端模块化 CommonJs、AMD、CMD、UMD、ESmodule 发展历程与关系

写完这行代码打球去 写完这行代码打球去 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 500+累计阅读 564平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄9年
关注
原创 最新推荐文章于 2026-03-07 04:51:36 发布 564 阅读 AI 写同款· GEO 优化 ›
SD-WAN组网案例——数据中心 阅读详情

前端模块化

发展过程

NodeJS之前，前端不存在模块化，后端有模块化。
NodeJS诞生之后，它开始使用CommonJS模块化规范。

特点

一个文件就是一个模块，有自己的作用域，只向外暴漏特定的变量和函数。

目前流行的模块化规范有 CommonJs、AMD、CMD、UMD、ESmodule

一览表

在这里插入图片描述

webpack支持性

在这里插入图片描述

总结

  1. AMD/CMD/CommonJs 是js模块化开发的规范，对应的实现是require.js/sea.js/Node.js
  2. CommonJs 主要针对服务端，AMD/CMD/ES Module主要针对浏览器端，容易混淆的是AMD/CMD。
  3. AMD与CMD
  • 区别：
    *AMD是预加载，在并行加载js文件同时，还会解析执行该模块（因为还需要执行，所以在加载某个模块前，这个模块的依赖模块需要先加载完成）；而CMD是懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。
  • 优缺点：
  • AMD优点：加载快速，尤其遇到多个大文件，因为并行解析，所以同一时间可以解析多个文件。
  • AMD缺点：并行加载，异步处理，加载顺序不一定，可能会造成一些困扰，甚至为程序埋下大坑。
  • CMD优点：因为只有在使用的时候才会解析执行js文件，因此，每个JS文件的执行顺序在代码中是有体现的，是可控的。
  • 执行等待时间会叠加。因为每个文件执行时是同步执行（串行执行），因此时间是所有文件解析执行时间之和，尤其在文件较多较大时，这种缺点尤为明显。

  1. CommonJS 和 ES Module 区别：CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用

  2. 如何使用？CommonJs 的话，因为 NodeJS 就是它的实现，所以使用 node 就行，也不用引入其他包。AMD则是通过

附本人GitHub学习demo front-end-module 内含有详细demo帮助理解各个模块的区别

收录于
知识进阶

当前文章被收录于：

知识进阶
5 篇文章 0 人学习

网络通信，性能，安全，浏览器

订阅专栏 查看详情
模块化

当前文章被收录于：

模块化
2 篇文章 0 人学习

CSS Module ES6 Module CommonJS SeaJS/CMD RequireJS/AMD

订阅专栏 查看详情
标签
#前端 #javascript #webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
强化学习（Reinforcement Learning）与动态系统控制方法 一个具体的 RBC 的例子是自动驾驶汽车中的交通规则。在训练过程中，代理通过与环境交互获取奖励信号，并学习如何在某个状态下采取最佳的行动，以最大化长期的累积奖励。在化工过程中，通过对生产过程中的温度、压力、流量等参数的控制来实现产品的质量和产量的提高。需要注意的是，以上代码只是一个简单的示例，实际的 MPC 系统可能会更加复杂，并包含更多的模型预测和控制算法来实现更复杂的控制任务。需要注意的是，以上代码只是一个简单的示例，实际的自动驾驶汽车系统可能会更加复杂，并包含更多的规则和条件来确保安全行驶。 阅读详情

相关推荐

射频电路设计——射频器件基础

本文仅供自己复习使用，请勿转载！ 射频电路制作方法 MCM工艺 CMOS工艺 趋肤效应、深度 频率越高趋肤效应越明显 高频器件 高频电阻 绕线的比贴片的多一个电感，是因为绕线的因为是线绕制的，只有有线就会有电感，所以绕线电阻等效模型会比贴片的多一个电感 多晶硅电阻模型 深线性区MOS电阻 高频电阻的频率响应 记忆的话就后面的频率特性有点像电容的 高频电容 作用 单层贴片式电容 多层贴片式电容 MIM电容 MOM电容 由于是并联的，所以总的电容值是单个的直接相加 PN结电容 M.

输出每日所学，供大家学习使用 7149

CJS、ESM、AMD、CMD、UMD

CJS、ESM、AMD、CMD、UMD

qq_45225759的博客 1155

Qt中输出中文出现乱码（win10系统下）

当我刚开始在win10下使用Qt Creator（4.3.0版本）时，遇到过这么个问题：当程序输出中文时，中文会乱码，程序本身的中文未乱码。 乱码截图如下： 我查阅了很多资料，最后在自己的不断的尝试下，解决了乱码问题。进入主题，具体如何解决乱码？ ① 首先，我们先设置一下，可以直观在Qt界面上看到文件的编码方式： 点击工具（tool）->选项（option）->文本编辑器->显示->Diplayfileencoding，将其勾选上，点击apply，即可，截图如下...

请叫我皮皮虾的博客 5200

前端模块化（ CommonJS、AMD、CMD、UMD、ES Module） 详解

1.CommonJS CommonJS是2009年社区提出的最早的模块标准 Node.js采用的是CommonJS标准的一部分，并在此基础上做了一些变化。 申明方式 modele.exports.name = 'hello word'; 　　module.exports.sayHello = function() { 　　 console.log('Hello '); 　　}; exports 是与外界联系的桥梁不可以直接复制，以下为错误方式 　　module.exports = { 　

webjhh的博客 967

张量分解浅谈（四 Tucker 分解）

学完了SVD算法之后，我们继续回到张量几大分解的学习上来，本期学习的主要内容是张量的 Tucker 分解 以及 前面的CP分解还留下一点没有说完，正好一并补齐！后面的公式我将采用颜色标记，红色代表必须掌握，蓝色尽量掌握！ 在这之前先附一张图，包含了各种运算符号的名称含义，大部分是前面说过或者使用过的： Tensor decomposition一 . Tucker 分解公式介绍和原理二 . 张量的 n-Rank 一 . Tucker 分解公式介绍和原理 我们先来看一张被使用过很多次的Trucker 分解图

欢迎来到 豪哥 的博客 1万+

什么是PON(无源光纤网络)、PON的发展及演进

全球知名媒体Omdia在光纤和铜缆接入设备预测报告中对2022年2月的预测显示，PON设备端口收入预计在2020年至2027年期间以12.3%的年复合增长率增长，到2027年将达到163亿美元，远高于2020年的82亿美元。 此前，Omdia有份报告称，在3月份举行的美国OFC展会中，众多 CSP 正在顺利部署 XGS PON（10G 对称），其他 CSP 专注于基于 GPON 的低速 FTTH 服务。另外关于25G PON 和 50G PON 之间的争论仍在继续，而Omdia 认为 25G PON 和 5

4929

前端工程化：CommonJS、AMD、CMD、UMD和ES Modules的区别

前端工程化思想一直以来都是一个非常热议的话题，其实前端工程化从技术方面来说，无非就是这么几点：CommonJS、AMD、CMD、UMD和ES6 Modules，那么我们就来说说前端这几个模块。 1、CommonJS 说到CommonJS，那就的从他的出发点说起了，commonjs的出发点是js没有完善的模块系统。标准库较少，缺少包管理工具，而在node.js兴起之后。能让js在任何地方运行，特别是服务端，也能具备开发大型项目的能力，所以commonjs也就应用而生了。node.js是commonjs的最

lee前端技术站 5675

美团mtgsig 3.1.0算法还原：从加密入口到d1生成的完整链路拆解

本文详细拆解了美团mtgsig 3.1.0签名算法的完整逆向过程。通过定位加密入口函数eH，理清a6、a5、a8到d1的生成依赖链，并运用插桩技术，在JSVMP混淆环境下逐步还原了核心参数的生成逻辑，为逆向工程实践提供了清晰的纯算还原方法论。

oo7890的博客 776

UMD和ECMAScript模块

From：http://snandy.iteye.com/blog/1450665 博客分类： Modular JS 因为 AMD 和CommonJS的糅合，所以先看看 CommonJS 和 AMD 是什么？ 模块：简单理解就是JS的对象化，比如可写个event事件模块接口。模块返回一个匿名函数，有的返回给一个变量，有的暴露自己，如jQuery暴露自己给win

服务好姐qa 7332

el-upload自定义上传dwg/dxf文件并且携带额外参数（CAD）

需求：需要使用el-upload自定义上传cad的图片或普通图片，这边需要判断区分下，以及上传后清空上传文件列表。

请叫我欧皇！的博客 1535

CATIA文件的网页预览方案

CATIA是工业设计中广泛使用的专业软件，产出`.CATPart`或 `.CATProduct`等文件类型，当资产数量较大时，我们希望快捷预览这些文件，就有了`CATPart`文件网页预览的需求 但我们知道，网页上无法直接渲染`CATPart`这种复杂的文件， CATIA生成的文件（如 `CATPart` 和 `CATProduct`）不仅包含三维几何信息（例如点、线和曲面），还涵盖了丰富的元数据与专业设计特征。 那有没有办法，能实现CATIA文件在网页上的便捷预览？

weixin_44211633的博客 1449

AMD , CMD, CommonJS，ES Module，UMD

JavaScript模块化 规范JavaScript的模块定义和加载机制,降低了学习和使用各种框架的门槛，能够以一种统一的方式去定义和使用模块，提高开发效率，降低了应用维护成本。 命名冲突 文件依赖 差异 AMD 与 CMD： AMD是 RequireJS 在推广过程中对模块定义的规范化产出。 CMD是 SeaJS 在推广过程中对模块定义的规范化产出。 CMD推崇依赖就近，AMD推崇依...

weixin_33872660的博客 323

RKNN 端侧部署必看：YOLOv11 Pose 姿态估计模型转换与性能优化实战

随着人工智能技术在边缘计算领域的快速发展，姿态估计作为计算机视觉的重要分支，在智能监控、人机交互、体感游戏等场景中展现出巨大的应用潜力。本文深入研究了YOLOv11 Pose模型在Rockchip RKNN平台上的部署方案，从理论基础、模型转换、平台优化到实际部署进行了全面阐述。通过详细的技术分析和实验验证，证明了RKNN平台能够有效提升YOLOv11 Pose的推理性能，在RK3588硬件平台上实现了高达100 FPS的实时姿态检测，为边缘计算场景下的姿态估计应用提供了高效的解决方案。

m0_71589036的博客 183

前端模块化——彻底搞懂AMD、CMD、UMD、ESM和CommonJS

UMD是AMD和CommonJS的一个糅合。AMD是浏览器优先，异步加载；CommonJS是服务器优先，同步加载。既然要通用，怎么办呢？那就先判断是否支持node.js的模块，存在就使用node.js；再判断是否支持AMD（define是否存在），存在则使用AMD的方式加载。这就是所谓的UMD。

zzy7075的专栏 5398

android 蓝牙通讯demo

android 下蓝牙通讯demo，实现了发现蓝牙，使能蓝牙，通过蓝牙发送消息。

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员，提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列，各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性，请参见数据手册。有关 ARM Cortex™-M4F 内核的信息，请参见《Cortex™-M4F 技术参考手册》。

JavaScript 模块化：CommonJS、AMD、CMD、UMD、ES Module

JavaScript 模块化：CommonJS、AMD、CMD、UMD、ES Module 为什么要模块化 用原始方式加载，所有变量都挂载在window对象上，前端功能越来越多，引用的包越来越多，难免会有冲突。因此需要模块化来区分不同的功能。 以下简述下各种模块化方案的使用方法，只做了解，不做深入。 在webpack和babel工具统治下，我们只需要学好ES Module 即可 一、commonJS 特点 所有代码都运行在模块作用域，不会污染全局作用域。 模块可以多次加载，但是只会在第一次加载时运行

小笼包不是包的博客 573

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面，电脑运行连游戏界面都一样大小，很怀旧，很真实，（英文版）强烈推荐，很小的文件，很难才找到的。

CommonJs, AMD/RequireJs,CMD/seajs, UMD, webpack

JavaSript模块化 在了解AMD，CMD规范前，还是需要先来简单地了解下什么是模块化，模块化开发？ 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的 分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方 式。可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的 存在。

洛小宇博客 1170

AMD、CMD、CommonJS以及UMD的简单对比

一、AMD 为浏览器环境设计的， 所以是异步模块加载定义的 加载模块 AMD采用require()语句加载模块，但是不同于CommonJS，它要求两个参数： 　　require([module], callback); 第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。 定义模块 模块通过 define 函数定义...

qq_21744995的博客 501

前端模块化commonJS,CMD,AMD,UMD,es6 module

前端模块化

czz19910404的博客 589

彻底理清 AMD,CommonJS,CMD,UMD,ES6 modules

本文你将学到:1.Rollup 是什么2.CommonJS、AMD、CMD、UMD、ES6 分别的介绍3.ES6 模块与 CommonJS 模块的区别4.模块演进的产物 —— Tree ...

frontend_frank的博客 692

前端模块化规范详解

文章摘要: JavaScript模块化发展经历了从全局函数、命名空间到IIFE模式的演进，最终形成了多种规范并存的局面。文章详述了CommonJS、AMD、CMD、ESModule和UMD五种主要模块化规范的特点和实现方式。CommonJS适用于服务器端同步加载，AMD和CMD专为浏览器异步加载设计，ESModule作为语言标准规范支持静态分析，UMD则实现跨环境兼容。通过对比各种规范的语法和加载机制，文章揭示了模块化在解决命名冲突、依赖管理、代码复用等问题上的优势。

分享前端工程化、AI 应用、Agent 开发与大模型实践！ 1694

一文搞懂前端模块化的演进与发展

随着Web技术的不断进步，前端模块化已成为现代Web开发不可或缺的一部分。本文将探讨前端模块化的历史演进，特别是ES Module（ESM）的崛起及其对未来前端开发的影响。

xiaofanguan的博客 1143

CommonJS-AMD-CMD-UMD-ES6前端模块化

CommonJS-AMD-CMD-UMD-ES6前端模块化 1、CommonJS (同步加载)（适用于服务器端，不适合浏览器端）(nodejs 文件并没有因为被require了两次而初始化两次。) 1-1、定义模块： 根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。 1-2...

u010928583的博客 499

UMD、CommonJS、ES Module、AMD、CMD模块的写法

AMD异步模块规范 RequireJS就是AMD的一个典型的实现。 以下是一个只依赖与jQuery的模块代码: // foo.js define(['jquery'], function($){ //此为工厂函数 function myFunc(){}; // 暴露公共方法 return myFunc; }) define(...

weixin_30716725的博客 273

关于CJS,AMD,CMD,UMD的了解

关于CJS,AMD,CMD,UMD的了解

qq_73917015的博客 576

一文带你了解，前端模块化那些事儿

该文章主要讲述了前端模块化的发展历史和各个阶段的技术方案，包括无模块化（IIFE）、CommonJS、AMD、CMD、ESModule、UMD。其中，无模块化时期的文件拆分是最基础的模块化，但也存在函数命名冲突的问题；IIFE 是现代模块化的基石，利用函数的块级作用域进行隔离，可以控制作用域；CommonJS 文件即模块，模块加载同步，适用于服务器端 node，浏览器端使用 webpack 或 browserfy。

老男孩的博客 1065

JavaScript的模块化

本文梳理了前端模块化的发展历程，从最初的script标签到CommonJS、AMD等规范，最终演进为ES Module标准。模块化解决了代码复用性差、全局污染等问题，通过拆分功能模块提升可维护性。关键优势包括：隔离作用域避免命名冲突、声明式依赖管理、按需加载优化性能。随着前端工程化发展，模块化配合npm和构建工具成为现代前端开发的基础。文章还对比了CommonJS和ES Module的导出机制差异，解释了require和import的适用场景。模块化是应对复杂前端应用的核心方案，推动了前端从脚本到应用的质变

诸葛韩信--一个前往前端不归路的浪子 986

JS模块化(IIFE CommonJS ESModule UMD)

JS本身就是为了简单页面的设计：页面动画、表单提交，并不会内置任何命名空间或者模块化相关的概念随着业务的飞速的飞速扩张，针对JS的模块化涌现出了大量的解决方案。

weixin_45607172的博客 795
上一篇： 当我精通vue2的源码dep和watcher的关系时
下一篇： react启动报错： Error: error:0308010C:digital envelope routines::unsupported at new Hash
点赞 0
评论 0
书签 书签 0
写完这行代码打球去
写完这行代码打球去
博客等级 码龄9年 204粉丝 59原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值