前端打包产物 cjs /es/umd 区别详解

前端打包产物 cjs /es/umd 区别详解一、先搞懂三个产物对应什么规范cjs → CommonJSNode 原生模块规范es / esm → ES Module(ESM)ES6 官方原生模块umd → Universal Module Definition兼容多环境通用打包格式二、核心区别总览表对比项cjs (CommonJS)es (ESM)umd标准Node.js CommonJSES6 Module兼容封装方案导入语法require()import自动适配 require / define / 全局变量导出语法module.exportsexport / export default自动判断环境导出加载时机运行时动态加载编译期静态解析运行时判断环境Tree-Shaking❌ 不支持✅ 完美支持❌ 不支持运行环境Node.js、旧打包工具现代浏览器、Vite/Webpack5、新版 Nodescript 标签、Node、RequireJS 全兼容文件后缀.js.mjs / “type”:“module” 的 .js.js典型用途给 Node 直接引用业务项目打包、体积优化CDN 直接 script 引入、兼容老旧项目三、分别详细讲解1. cjsCommonJS输出代码示例// dist/cjs/index.cjsconstadd(a,b)ab;exports.addadd;module.exports{add};特点同步运行时加载代码执行阶段才解析依赖不支持 Tree-Shaking所有代码全部打包进文件无法删除未使用代码Node 默认识别格式require(‘xxx’) 导入导出是值拷贝内部变量更新外部不会同步适合场景后端 Node 项目直接引入依赖包老旧 Webpack 项目未开启 ESM 解析。缺点打包体积更大现代前端工程不会优先使用。2. es / esmES Module输出代码示例// dist/es/index.jsexportconstadd(a,b)ab;exportdefault{add};特点静态模块import/export 必须写在顶层编译期就能分析依赖支持 Tree-Shaking打包工具自动剔除没导入的函数、变量大幅减小产物体积浏览器原生支持适用场景Vue / React / Vite 前端业务项目希望打包体积最小、做按需引入库开发者给现代打包工具使用。3. umdUniversal Module Definition 通用模块输出代码简化示例(function(root,factory){// AMD 判断RequireJSif(typeofdefinefunctiondefine.amd){define(factory);}// CommonJS 判断Nodeelseif(typeofmoduleobjectmodule.exports){module.exportsfactory();}// 浏览器全局 scriptelse{root.myLibfactory();}})(this,function(){constadd(a,b)ab;return{add};});特点一段代码自动兼容三种环境浏览器直接 script、Node require、RequireJS AMD包裹一层自执行函数代码冗余不支持 Tree-Shaking挂载全局变量CDN 直接引入最方便适用场景CDN 通过四、package.json 字段如何对应这三种产物库项目打包后会在 package.json 配置不同入口打包工具自动择优选用{main:dist/cjs/index.js,// Node 默认读取 cjsmodule:dist/es/index.js,// Webpack/Vite 读取 esm 做 Tree-Shakingunpkg:dist/umd/index.umd.js,// CDN 使用 umdexports:{.:{import:./dist/es/index.js,require:./dist/cjs/index.js}}}main给 Node require 使用指向 cjsmodule现代打包工具识别优先使用 es 产物开启 Tree-Shakingunpkg/jsdelivrCDN 访问加载 umdexports新版标准区分 import / require 分别指向 es /cjs。五、开发 / 打包怎么选业务前端项目Vite/Webpack5优先读取 module 字段使用 es 产物打包体积最小Node 后端项目使用 require读取 main 对应的 cjs需要 CDN 直接 script 引入使用 umd自己开发工具类库三种都输出同时配置 main、module、unpkg 兼容所有场景。六、一句话总结区别cjs给 Node 用不支持摇树es现代前端打包最优解支持 Tree-Shaking体积最小umd兼容所有老旧环境CDN 直接引入专用冗余无摇树。