UMD与ESM：前端模块化的两种标准

最新推荐文章于 2025-04-24 18:06:51 发布
最新推荐文章于 2025-04-24 18:06:51 发布
阅读量868 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web_git912/article/details/133665749
版权
前端 专栏收录该内容
62 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了前端开发中的UMD和ESM模块化标准，讲解了它们的概念、用法，并通过示例代码展示了各自特点。UMD兼容多种环境，而ESM具有简洁语法和静态分析优势，开发者可根据需求选择合适的模块化标准。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

UMD和ESM是前端开发中常用的模块化标准。模块化是一种组织和管理代码的方法，可以将代码分割为多个模块，提高代码的可维护性和可复用性。本文将介绍UMD和ESM的概念、用法和示例代码。

UMD（Universal Module Definition）是一种通用的模块化标准，它兼容了多种环境和模块加载器。UMD模块可以在浏览器环境和Node.js环境中使用，也可以与其他模块加载器（如RequireJS）一起使用。UMD模块定义了一个全局变量，然后在不同的环境下判断并注册模块。下面是一个UMD模块的示例代码：

(function (root, factory) {
   
    if (t
了解本专栏 订阅专栏 解锁全文
JS & Node 模块化解释：AMD、UMD、CommonJS、 ESM
Thinking anywhere anytime.
07-08 3596
AMD就是为了解决命名污染而研发的，同时还支持按需加载，是第一个引入模块化开发的规范插件，要想使用AMD语法得借助一款插件RequireJS。注意，AMD 只适用于浏览器，虽然也支持 Node，但不如 Node 自家的 CJS，后面会讲。CommonJS也常被称为CJS，与ADMI一样属于模块化语法，不过它是用来兼容后端Nodejs语言，庆幸的是，CJS在 Node.js 中已内置，开箱即用，无需引入插件。UMD是AMDCommonJS。
面试知识点总结 - js 模块化
weixin_42291794的博客
09-09 594
1. Es6 let fn1 = ()=>{ } export{ fn1, fn2 } import {fn1,fn2} from './detail.js'; 内容是对象,分隔符是逗号 export default{ name: "我是index.js", fn2: ()=>{ } } import index from "./index.js"; 2. commonJs(浏览器,服务器) 暴露exports 对象,默认是{} exports.xxx
javascript umd esm slim
weixin_34368949的博客
01-18 320
在CDN的连接中看到多个连接时如何选择? JavaScript 模块现状 UMD和ECMAScript模块 https://cdn.bootcss.com/popper.js/1.13.0/esm/popper.min.js - 基于ES Module 的实现版本 https://cdn.bootcss.com/popper.js/1.13.0/umd/popper.min.js - Univer...
深入理解前端中的模块化体系：ESM、CommonJS、AMD 对比与应用场景
mmc123125的博客
04-11 1141
技术选型场景推荐模块体系现代前端项目（React/Vue）ESM微前端架构后端 Node 项目纯 ESM（推荐）或 CommonJS（兼容旧项目）npm 组件开发UMD + ESM + CJS 打包统一模块系统 = 提升团队协作效率 + 提高打包性能 + 减少模块混乱问题。
js 模块化：ESM ,CJS, AMD, UMD
Y7998的博客
04-15 1968
一般来说，一个文件就是一个模块，这个文件内的作用域唯一，可以向外暴露变量，函数等。模块化的出现减少了代码的繁琐，利于代码复用和日后维等作用。JavaScript的模块系统有ESM ,CJS, AMD, UMD。
CJS,AMD,UMD和ESM
dualvencsdn的博客
06-27 774
JS中加入了模块的概念。其中就有CJS,AMD,UMD,ESM这些模块的出现。 你们或许对CJS的语法很熟悉，因为node用的就是CJS的模块方式。 CJS是同步引入模块的 可以从库中引入或者从本地某个文件夹中引入。 用CJS引入的是要引入对象的一个拷贝 CJS在浏览器环境中是无效的，它必须要经过编译和打包后才能在浏览器环境中执行。AMD AMD是asynchronous module definition 的缩写。 AMD是异步加载模块的。(就像它的名字一样) AMD设计出来是供前端使用的，而
前端模块化iife、CJS、AMD、UMD、ESM的区别
厦门在乎科技
08-06 796
前端模块化 注：以下所有解释完全依照本人的主观思想，如果有不对的地方，请见谅 说到模块化，不得不先了解一下模块的起源，时间顺序方面不要太在意 初始，只是创建一个js文件，里面定义一些方法、常量等，提供给其他页面使用，这就是一个最简单的模块，那只算是一个功能文件，不是私有的，会污染全局 后来，就把所有的方法放到对象中，通过对象使用这些方法，但是外部可以通过对象更改里面的属性，而且也会污染全局，这个缺点也很不好 然后就出现了命名空间这个东西，命名空间就是说：若全局空间中已有同名对象，则不覆盖该对象
【前端工程化】：模块化与组件化的UI设计最佳实践
![【前端工程化】：模块化与组件化的UI设计最佳实践]...文章还讨论了模块化与组件化在前端工程化中的融合，以及如何通过工具链优化、工作流整合和最佳
0基础快速入门WebPack（1）——引言：简述模块化思想
xiao廸要飞
07-22 185
文章目录1. 重点提炼2. webpack 与 模块化2.1 模块化2.2 模块化的核心2.3 ESM2.3.1 独立模块作用域2.3.2 导出模块内部数据2.3.3 导入外部模块数据2.4 模块化的向下兼容2.4.1 CommonJS2.4.2 AMD2.4.2.1 requireJS2.4.3 requireJS的 CommonJS 风格2.4.4 UMD 1. 重点提炼 模块化 commonjs - node.js amd/cmd - require.js / sea.js umd - 同构 es
前端面经-JS篇（四）--回调地狱、promise异步编程、Proxy 与 Reflect 、模块化
最新发布
qq_44643806的博客
04-24 711
提供了一种优雅的方式来处理异步操作，避免了回调地狱问题。
UMD编码规范
weixin_33735077的博客
03-27 253
(function(global, factory){ typeof module === 'object' && typeof module.exports === 'object' ? module.exports = factory() :typeof define === 'function' && define.amd ? define(factor...
UMD规范
weixin_34234721的博客
09-14 287
2019独角兽企业重金招聘Python工程师标准>>> ...
前端模块化-UMD规范及其实现
逍遥的前端笔记
08-08 2149
本文介绍了UMD规范及其在不同环境中的应用，包括React中的UMD模块使用以及手动实现一个UMD模块的详细步骤。
学习UMD规范
Raywh的博客
10-08 1031
UMD规范，factory函数
前端模块化——彻底搞懂AMD、CMD、UMD、ESM和CommonJS
zzy7075的专栏
02-04 3650
UMD是AMD和CommonJS的一个糅合。AMD是浏览器优先，异步加载；CommonJS是服务器优先，同步加载。既然要通用，怎么办呢？那就先判断是否支持node.js的模块，存在就使用node.js；再判断是否支持AMD（define是否存在），存在则使用AMD的方式加载。这就是所谓的UMD。
web学习 -- ESM规范（ECMA Script Modules）
qq_39273039的博客
08-18 2053
ESM原理 原理 模块开发时，其实是构建依赖关系图的过程，模块之间的依赖通过import导入语句找到其所依赖的其他代码文件，依赖关系会指定一个入口文件 但是浏览器并不能直接使用这些代码，需要进行解析所有文件，并把它们变成一种模块记录（Module Record）的数据结构，解析后再变成模块实例，模块实例会包含代码+状态，其实就是指令+变量值的结合。 对于模块而言，真正需要的是模块实例。 模块加载从入口文件开始，最终生成完整的模块实例关系图。过程包含： 构建：查找，下载，然后把所有文件解析成module
Modularity（模块化-UMD通用模式）
SeriousLose
06-17 1015
UMD通用模式（universal module definition） UMD 是 AMD 和 CommonJS 的综合产物。 如上所说，AMD 的用武之地是浏览器，非阻塞式加载。 CommonJS 主要用于服务端 Nodejs 中使用。 就想到了一个通用的模式 UMD（universal module definition） 。 ...
前端模块化-ESM
逍遥的前端笔记
08-08 1434
本文总结了ESM（ES6 Module）的相关知识点，包括基本语法、浏览器加载过程、Node.js中的处理以及与CommonJS模块的差异和兼容。
ESM规范-现在的主导
全栈科学家的博客
12-07 588
ESM
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值