CommonJS-UMD-ES区别 #

CommonJS 包 #

ES6 之前的模块化规范的包，通过require('xxx')方式引入. 在打包工具(如:vite,rollup)中视为cjs格式

ESModule/esm/ES 包 (一个意思) #

符合 ES6 语法规范的包, 通过import xxx from 'xxx'方式引入. 在打包工具(如:vite,rollup)中视为es格式

UMD 包 #

UMD（Universal Module Definition）提供了支持多种风格的“通用”模式，在兼容 CommonJS 和 AMD 规范的同时，还兼容全局引用的方式。在打包工具(如:vite,rollup)中视为umd格式

UMD 实现原理很简单：

1. 先判断是否支持 AMD（define 是否存在），存在则使用 AMD 方式加载模块；
2. 再判断是否支持 Node.js 模块格式（exports 是否存在），存在则使用 Node.js 模块格式；
3. 前两个都不存在，则将模块公开到全局（window 或 global）

UMD 使得你可以直接使用 <script> 标签引用

参考资料 #

CommonJS & UMD & ES Module