CJS,UMD,ESM和IIFE怎么用
导读:本文共1773.5字符,通常情况下阅读需要6分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: CJS,UMD,ESM,IIFE是JavaScript用来实现"模块"的不同规则。CJSCommonJS的简写,只能在 NodeJS 上运行,使用require("module")读取并加载模块。缺点:不支持浏览器,执行后才能拿到依赖信息,由于用户可以动态 require,无法做到提前分析依赖以及Tree-Shaking。... ...
目录
(为您整理了一些要点),点击可以直达。CJS,UMD
,ESM
,IIFE
是JavaScript用来实现"模块"的不同规则。
CommonJS
的简写,只能在 NodeJS 上运行,使用require("module")
读取并加载模块。
缺点:不支持浏览器,执行后才能拿到依赖信息,由于用户可以动态 require,无法做到提前分析依赖以及Tree-Shaking。
CommonJS 规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。
用法如下:
Asynchronous Module Definition
的缩写(代表异步模块定义),可以看作 CJS 的异步版本,制定了一套规则使模块可以被异步 require 进来并在回调函数里继续使用,然后 require.js 等前端库也可以利用这个规则加载代码了。
用法如下:
定义的第一个部分是一个依赖数组,第二个部分是回调函数,只有当依赖的组件可用时(像RequireJS这样的脚本加载器会负责这一部分,包括找到文件路径)回调函数才被执行。
理想状态下,期望其依赖是异步加载的,通过在中注入script,不阻塞浏览器的加载和渲染,但实际环境下,其表现的没有那么好,因此需要 amd 模块为一个单文件模块并与require.js 优化器配合来进行渲染。
Universal Module Definition
的缩写(代表通用模块定义),同时兼容 CJS 和 AMD,并且支持直接在前端用<script src="lib.umd.js"></script>的方式加载。现在还在广泛使用,不过可能将被 ESM 和 IIFE 逐渐代替。
用法如下:
Immediately Invoked Function Expression
的缩写(立即调用函数表达式),只是一种写法,可以隐藏一些局部变量,可以用来代替 UMD 作为纯粹给前端使用的写法。
IIFE的写法如下:
ECMAScript Module
的缩写,使用importexport来管理依赖。由于它们只能写在所有表达式外面,所以打包器可以轻易做到分析依赖以及 Tree-Shaking。ESM 也支持动态加载(import )。
浏览器直接通过<script type="module">
即可使用该写法。
用法如下:
CJS,UMD,ESM和IIFE怎么用的详细内容,希望对您有所帮助,信息来源于网络。