背景
发现本地 dev 环境和生产环境 UI 不一样, 调出devTool 看了一下样式, 发现 style 不一样, 一个有 padding, 一个无
分析
看了下devTool , 仔细一瞅, padding: 0为啥生产环境没有呢?
再仔细一瞧, 哦, 类名都不一样, 本地是: ant-pro-page-container-children-container, 生产是: ant-pro-page-container-children-content,这长得这么像, 一看就是俩兄弟啊,这时我已经联想到 dev 环境和 build 的产物生成的 css 类名是不一样的, 项目的框架选的是 Umi 和 Antd, 这个出问题的组件是来源于antd-pro-components 的 PageContainer , 莫名感觉有点头大啊
过程
想了下, 凭经验判断, 不可能说会有UI 库的 dev 和 build 的产物同一组件的 css 类名会不同, 所以先定位到 umi 的打包配置
在 umi 的 issue 搜了下, 发现没有同类问题, 有个有一点点点点点相似的 issue提到了 umi 对css 的打包配置, 看了下项目的 config.ts, 发现只有一些基础配置, 像 css 压缩, loader 这些, 全都没有, 那就是走的默认配置, 那也没听说谁家的对 css 处理的默认配置会区分环境啊, 又去看了下项目的模版antd-pro, 看了下项目的在线 preview, 发现模版使用的PageContainer组件生产环境生产的是-content, 又拉下代码跑了下dev mock, 发现模版的 dev 生成的 css 类目也是-content, 这就尴尬了, 官方模板没这个问题, 所以哪里出错了呢?
又想了下, -content和-container这俩兄弟应该是在组件库中定义的, 应该是跟打包构建没关系的, 验证下猜想, 去antd的package里看了下
只有-container, 没有-content, 所以-content哪里来的呢? 看一下版本先, antd-pro模版里的 antd-pro-component的版本是2.3.57, 现在 main 的主版本是2.6.33, 然后去 releases里下载下老版本的代码, 嘿, 一瞧
果然, 是版本的问题, 新版本改成了-container, 而2.3.57的版本是-content
所以也就是说, 生产环境和我本地的包的版本是不一样的, 为啥不一样呢? 哦 好像是我之前在项目里升级了antd-pro-components, 但是好像也有兼容问题, 就取消掉package.json和package-lock.json, 只是把代码的暂存干掉了, 没有管node_modules的依赖, 所以antd-pro-components的包还是之前安装的新包, 所以本地的 css 类名和生产的 css类名不同, 所以我代码里都是对-container的样式修改, 没有-content的事, 所以出现了好像是打包的问题实际上是包版本不同而产生的问题
总结
- 哪里出现问题先去哪里看, 虽然本地连生产环境是个很好的调试方式但不要过于依赖它
- 保证本地的
npm包的版本和package-lock.json里锁定的版本一致 - 出现问题莫慌莫急, 多调试调试就好了
由此
- 锁定npm包的安装工具, 是使用
npm,yarn,cnpm,pnpm等, 总之不管使用什么, 团队项目里要统一, 可以在package.json里配置scripts钩子来限制包安装工具, 不然各种-lock.json会搞很乱, 会增加排查难度 - 注意
npm包版本的一致