Vue UI组件库为何需要common.js与umd.js格式文件？

为什么element-ui需要CommonJS格式的element-ui.common.js？ #

别觉得Vue项目只跑在浏览器就不需要CommonJS——项目的构建过程是在Node.js环境里完成的。早期Vue-cli（比如v2）基于Webpack，Webpack在读取依赖时，默认优先处理CommonJS格式的文件，Node.js本身属于CommonJS生态，加载起来更顺畅。

另外还有不少老项目还在使用require()的方式引入依赖，或是用了对ESM支持不完善的旧版构建工具，CommonJS版本就是为了兼容这些场景。还有SSR（服务端渲染）场景，Node.js端需要同步加载组件代码，CommonJS的同步加载机制比ESM的异步加载更适配这种需求。

element-ui.common.js到底起什么作用？ #

它和全局挂载没关系——全局挂载是UMD格式文件的事儿。CommonJS版本主要是给构建工具和Node环境用的：

• 让Webpack、Rollup这类构建工具能正确解析组件库的模块，顺利完成打包、Tree Shaking（配置到位的话）；
• 支持老项目用const ElementUI = require('element-ui')的方式引入；
• 适配SSR场景下Node端的同步加载需求，避免ESM异步加载带来的渲染问题。

为什么多数Vue UI库同时提供CommonJS和UMD格式？ #

核心就是覆盖更多使用场景：

• CommonJS：适配Node构建环境、老项目的require引入、SSR场景；
• UMD：既能在浏览器里通过<script>直接引入（自动挂载全局变量），又兼容CommonJS和AMD环境，适合快速做原型或者不需要构建的静态页面；
• 现在很多库还会提供ESM格式（一般在package.json的module字段里指定），方便现代构建工具做Tree Shaking，减少最终打包体积。

说白了，多格式入口就是让组件库能在各种不同的项目环境里都能用，而不是只适配最新的ESM规范项目。

内容的提问来源于stack exchange，提问作者tcguoxing