CJS、AMD、ESM、UMD、IIFE 模块化开发

JavaScript的模块化编程中,大家过多或少都见过CJS、ESM、AMD等等词汇,都应该知道这是模块化的一些规范定义,但是有些朋友可能还不太清晰其中的差异。

某天正在用rollup手工打包,出现了这么一个错误

这么多名词,一时半会儿搞不太清楚,干脆写一篇文章把这些简写的名称整明白,下次我也能出去吹水了!

一、CJS

CommonJS,require()全局方法同步加载模块,开发基于nodejs的服务端应用时采用规范。

CJS同步加载模块在客户端(浏览器)加载模块会阻塞后续代码的执行,因为客户端相较服务端性能更差,所以同步加载模块将浪费大量时间,因此想到了异步加载,也就是AMD主要解决的问题

二、AMD

AMD(全称:Asynchronous Module Definition),采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

三、ESM

Javascript 提出的实现一个标准模块系统的方案,基于ES6的静态模块语法,采用import/export语法,具有 CJS 的简单语法和 AMD 的异步特点,主流浏览器已经支持,还可以通过打包工具实现tree-shaking。

五、UMD

UMD(全称:Universal Module Definition),通用模块定义,支持浏览器/Server运行,通常作为备用模块。

五、IIFE

IIFE(全称:Immediately Invoked Function Expression,立即调用函数表达式),被称为 自执行匿名函数 的设计模式。

Reference:

发表评论 / Comment

用心评论~

金玉良言 / Appraise
DYBOY站长已认证
2021-05-21 11:13
模块化介绍:https://www.typescriptlang.org/tsconfig#module
DYBOY站长已认证
2021-05-21 10:29
Rollup打包推荐官方文档: https://rollupjs.org/guide/zh/