最近在捣鼓一个项目，要用到UMD格式打包，结果一堆坑。刚开始啥都不懂，直接拿webpack默认配置打包，生成的文件扔浏览器里各种报错，控制台一片红，气得我差点砸键盘。
第一次翻车现场
上周三蹲电脑前折腾到凌晨两点，发现三个致命问题：
- 项目在Node环境跑不起来，提示window is not defined
- 挂载全局变量时跟其他库撞名了
- 生产环境压缩后报错像天书
补救过程全记录
周四早上泡了杯浓咖啡开始填坑：
第一招先解决环境适配问题。在webpack配置文件里加了这段：
- 设置*: 'umd'
- 手动补globalObject配置项
- typeof self !== 'undefined' ? self : this
第二招防止全局污染。给*赋值时改用项目名+版本号的格式：
- MyLib_1_0_0
- 加版本号后重名概率直降90%
- 同事再也没抱怨过变量冲突
第三招搞了个骚操作。配置webpack的devtool选source-map模式：
- 开发环境用inline-source-map
- 生产环境切到source-map
- 出错时能直接定位源码位置
实测效果
周五下班前搞定了三件事：
- 在Node14/16环境测试通过
- 浏览器控制台干干净净没报错
- 生产环境报错信息能精确定位
现在项目组的萌新接手UMD打包，照着我的配置抄作业，十分钟就能跑通。早发现这三个方法，上个月就不用天天加班改bug了。