umd制作遇到问题?避开这3大坑轻松做出完美镜像

昨儿个折腾umd镜像做到半夜,差点把键盘给砸了。本来以为照着教程半小时完事儿,结果掉坑里爬都爬不出来。气得我灌了两罐红牛,愣是跟这鬼东西死磕到三点钟。今儿个把血泪史摊开说说,你们可别走我的老路。

开局就踩雷

起手装了个webpack插件,美滋滋敲完打包命令。结果终端哗报错,满屏红色字儿看得我脑仁疼。蹲电脑前扒拉了俩钟头文档才搞明白:那破插件去年就停更了,教程里的示例代码全是过期货。当场把教程作者祖宗十八代问候了个遍,重新换了官方推荐的插件才听见主机嗡嗡转起来。

依赖包变鬼打墙

眼瞅着进度条走到70%突然卡死,报错说找不到react-dom。我寻思这玩意儿不是早装了吗?开文件夹一看差点背过气:node_modules里躺着四个不同版本的react!原来昨天测试老项目时自动更新了依赖,新老版本在node_modules里打群架。赶紧把*锁死版本号:

  • react锁在17.0.2
  • react-dom必须跟react同版本
  • 把所有^和~这些通配符全删了

清空node_modules重装,这才听见硬盘吱吱响起来。

浏览器抽风事件

凌晨两点终于生成umd文件,兴冲冲丢进浏览器测试。Chrome正常加载,Firefox直接白屏,Edge弹窗说security error。我抻着脖子查控制台,发现跨域报错像个狗皮膏药粘着不放。想起来本地开的file协议,赶紧架个nginx服务器。改完配置重启服务,三个浏览器排排坐吃果果——总算全亮了!

意外收获

搞完这破镜像正收拾桌面,媳妇突然踹门进来。吓得我手抖把半罐咖啡泼键盘上,现在空格键按下去得拿牙签掏。她抄起我做失败的第三版镜像光盘,啪的拍桌上:"修修你儿子玩具车!" 敢情车灯罩不知啥时候被熊孩子摔裂了,光盘卡进去正好严丝合缝。得,折腾一宿的废品还派上医疗用途了。