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

最新推荐文章于 2024-11-16 22:35:42 发布

码动青春

最新推荐文章于 2024-11-16 22:35:42 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/web_git912/article/details/133665749

前端专栏收录该内容

62 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了前端开发中的UMD和ESM模块化标准，讲解了它们的概念、用法，并通过示例代码展示了各自特点。UMD兼容多种环境，而ESM具有简洁语法和静态分析优势，开发者可根据需求选择合适的模块化标准。

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

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

(function (root, factory) {
   
   
    if (typeof define ===

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

码动青春

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

JS & Node 模块化解释：AMD、UMD、CommonJS、 ESM

Thinking anywhere anytime.

07-08

3874

AMD就是为了解决命名污染而研发的，同时还支持按需加载，是第一个引入模块化开发的规范插件，要想使用AMD语法得借助一款插件RequireJS。注意，AMD 只适用于浏览器，虽然也支持 Node，但不如 Node 自家的 CJS，后面会讲。CommonJS也常被称为CJS，与ADMI一样属于模块化语法，不过它是用来兼容后端Nodejs语言，庆幸的是，CJS在 Node.js 中已内置，开箱即用，无需引入插件。UMD是AMDCommonJS。

ES模块（ESM）、CommonJS（CJS）和UMD三种格式

1 条评论

优快云-Ada助手 2023.12.03
恭喜你开始博客创作，这篇关于UMD与ESM的前端模块化的两种标准的文章非常有价值。你对这两种标准进行了清晰的介绍和比较，让读者更好地了解了它们的区别和应用场景。接下来，我希望你可以进一步探讨每种标准的优势和劣势，以及在实际项目中如何选择合适的模块化方案。这样的深入分析将为读者提供更多实用的指导和启发。期待你的下一篇文章！推荐【每天值得看】：https://bbs.youkuaiyun.com/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1

js 模块化：ESM ,CJS, AMD, UMD

Y7998的博客

04-15

2531

一般来说，一个文件就是一个模块，这个文件内的作用域唯一，可以向外暴露变量，函数等。模块化的出现减少了代码的繁琐，利于代码复用和日后维等作用。JavaScript的模块系统有ESM ,CJS, AMD, UMD。

javascript umd esm slim

weixin_34368949的博客

01-18

340

在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...

面试知识点总结 - js 模块化

weixin_42291794的博客

09-09

633

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

CJS,AMD,UMD和ESM

dualvencsdn的博客

06-27

902

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

842

前端模块化 注：以下所有解释完全依照本人的主观思想，如果有不对的地方，请见谅说到模块化，不得不先了解一下模块的起源，时间顺序方面不要太在意初始，只是创建一个js文件，里面定义一些方法、常量等，提供给其他页面使用，这就是一个最简单的模块，那只算是一个功能文件，不是私有的，会污染全局后来，就把所有的方法放到对象中，通过对象使用这些方法，但是外部可以通过对象更改里面的属性，而且也会污染全局，这个缺点也很不好然后就出现了命名空间这个东西，命名空间就是说：若全局空间中已有同名对象，则不覆盖该对象

带你全面理解JS模块的标准（AMD、CMD、COMMON.JS 、 UMD、ESM）

freddy的博客

04-15

3092

在前端的世界演变里，有着几种JS的模块规范，从出现的序言来说就是： ①amd ②cmd ③common.js ④ umd ⑤ esm 现在Vue框架里面都是遵守esm规范，不得不说esm是目前最好最流行的一种js规范了 amd - 浏览器中的js模块化解决方案 AMD 全称是 Async Module Definition -中文：异步模块化定义 require.js是AMD模块规范的一个具体实现核心是通过define方法对无序的代码进行有序的模块化定义，通过require方法实现代码的模块化加

Javascript模块化 - CommonJS - AMD - CMD - UMD 模块化方式详解

qq_37779333的博客

11-16

1003

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)，并进行组合在一起；块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信；通过两者的比较，可以得出AMD模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。AMD模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案；

ESM 与 UMD 的区别？如何同时输出两种格式

07-14

- 第二个输出对象指定生成 UMD 格式的文件 `bundle.umd.js`，并通过 `name` 属性指定全局变量名 `MyLibrary`，以便在不支持模块化的环境中作为全局变量暴露出来。 - 使用了 `terser` 插件对 UMD 输出进行压缩优化 [^...

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

zzy7075的专栏

02-04

4782

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

模块化之CJS, AMD, UMD 和 ESM

qubes的专栏

11-07

640

[toc]]

UMD编码规范

weixin_33735077的博客

03-27

272

(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

313

2019独角兽企业重金招聘Python工程师标准>>> ...

前端模块化-UMD规范及其实现

逍遥的前端笔记

08-08

2663

本文介绍了UMD规范及其在不同环境中的应用，包括React中的UMD模块使用以及手动实现一个UMD模块的详细步骤。

学习UMD规范

Raywh的博客

10-08

1113

UMD规范，factory函数

web学习 -- ESM规范（ECMA Script Modules）

qq_39273039的博客

08-18

2159

ESM原理原理模块开发时，其实是构建依赖关系图的过程，模块之间的依赖通过import导入语句找到其所依赖的其他代码文件，依赖关系会指定一个入口文件但是浏览器并不能直接使用这些代码，需要进行解析所有文件，并把它们变成一种模块记录（Module Record）的数据结构，解析后再变成模块实例，模块实例会包含代码+状态，其实就是指令+变量值的结合。对于模块而言，真正需要的是模块实例。模块加载从入口文件开始，最终生成完整的模块实例关系图。过程包含：构建：查找，下载，然后把所有文件解析成module

Modularity（模块化-UMD通用模式）

SeriousLose

06-17

1079

UMD通用模式（universal module definition） UMD 是 AMD 和 CommonJS 的综合产物。如上所说，AMD 的用武之地是浏览器，非阻塞式加载。 CommonJS 主要用于服务端 Nodejs 中使用。就想到了一个通用的模式 UMD（universal module definition）。 ...