快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
开发一个企业级前端组件库的打包配置示例，要求：1. 支持UMD和IIFE两种输出格式；2. 处理不同环境下的兼容性问题；3. 包含外部依赖排除配置；4. 演示如何通过环境变量切换输出格式。提供完整的webpack.config.js和rollup.config.js配置文件，并说明关键配置项的作用。- 点击'项目生成'按钮，等待项目生成完整后预览效果
在企业级前端开发中，模块打包格式的选择直接影响组件的复用性和兼容性。最近在配置一个内部组件库时，我遇到了UMD和IIFE格式的配置问题，特别是当系统提示INVALID VALUE "IIFE" FOR OPTION "OUTPUT.FORMAT"这类错误时，才发现这里面有不少需要注意的细节。下面分享我的实战经验，希望能帮到遇到类似问题的朋友。
- 为什么需要同时支持UMD和IIFE？
UMD（Universal Module Definition）格式的优势在于同时兼容CommonJS、AMD和全局变量引入方式，适合作为公共库的通用方案。而IIFE（Immediately Invoked Function Expression）更适合直接嵌入HTML的场景，比如需要快速集成到传统项目中。企业级组件库通常需要兼顾这两种需求。
- Webpack配置关键点
在Webpack中配置多格式输出时，可以通过libraryTarget指定UMD，同时用output.globalObject处理不同环境的全局对象差异。对于IIFE格式，Webpack原生不支持直接输出，需要通过output.libraryTarget: 'var'配合自执行函数包装来实现类似效果。
- Rollup的天然优势
Rollup对IIFE和UMD的支持更直接，通过output.format选项即可指定。但要注意UMD格式必须同时定义name参数作为全局变量名，否则会报错。Rollup还能自动处理外部依赖的排除，通过external配置避免打包时包含不必要的依赖。
- 环境变量切换实战
实际项目中，我们通过cross-env设置环境变量来动态切换打包格式。比如定义FORMAT=umd或FORMAT=iife，然后在配置文件中通过process.env.FORMAT读取并应用到输出配置中。这种方案特别适合CI/CD流水线中的多环境构建。
- 外部依赖的精细化控制
企业组件库常需要排除React、Vue等框架依赖，避免重复打包。在Webpack中通过externals配置，Rollup中则使用external选项。更精细的控制可以通过函数判断，比如根据请求路径动态决定是否排除。
常见错误排查
格式名称拼写错误（如将IIFE写成IFFE）
- UMD格式未指定全局变量名
- 环境变量未正确传递到构建流程
外部依赖配置遗漏导致打包体积异常
浏览器兼容性处理
对于需要支持旧浏览器的项目，IIFE格式要注意避免使用箭头函数等新语法。可以通过Babel预设@babel/preset-env的targets配置自动降级，同时确保打包后的代码没有ES6+特性。
- 性能优化技巧
UMD格式的代码通常比IIFE略大，因为包含模块检测逻辑。如果确定目标环境，可以优先使用IIFE。另外，通过代码分割将不同格式的输出分开存放，可以优化加载效率。
经过这次项目实践，我深刻体会到模块格式选择不是简单的配置问题，而是需要综合考虑使用场景、环境兼容性和维护成本。正确的配置能大幅降低后续的集成和维护难度。
整个配置过程在InsCode(快马)平台上验证非常方便，它的在线编辑器可以直接运行Webpack和Rollup配置，实时看到输出结果。最让我惊喜的是，修改配置后不需要手动搭建环境就能快速测试不同格式的效果，这对排查配置问题特别有帮助。对于需要部署演示的组件库，平台的一键部署功能也能直接将UMD/IIFE包发布成可访问的在线示例，省去了自己配置服务器的麻烦。
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
开发一个企业级前端组件库的打包配置示例，要求：1. 支持UMD和IIFE两种输出格式；2. 处理不同环境下的兼容性问题；3. 包含外部依赖排除配置；4. 演示如何通过环境变量切换输出格式。提供完整的webpack.config.js和rollup.config.js配置文件，并说明关键配置项的作用。- 点击'项目生成'按钮，等待项目生成完整后预览效果
