一个在职程序员的前端工程化踩坑实录：从工具链到部署

工具链选型：别让脚手架替你背锅

从 Vue2 迁到 Vue3 + Vite 时，@vitejs/plugin-legacy 和老版安卓 WebView 的兼容问题耗了三天。最终定位到某依赖在 commonjs 转译时丢失 default 导出，手动配置才解决：

// vite.config.ts
optimizeDeps: { exclude: ['lodash-es'] }

教训：工具链选型不能只看官网 Demo。Vite 冷启动快，但老设备、微前端场景下技术债一分不少。新项目应先列兼容性风险清单，逐条对比 Webpack 与 Vite 差异再定。

多智能体协作？不如先把 ESLint 规则统一了

AI 生成代码虽快，但一跑 npm run lint 报错比代码还多。AI 再强，也救不了没有规范约束的工程。我把 ESLint 升级为强制约束：import 排序、no-console 仅 warn、type 导入显式声明，配合 husky + lint-staged 提交前自动修复。多智能体落地团队前，先解决“谁 review AI 代码”。我的态度：让 AI 写草稿，人做编辑。

部署流程：一次线上事故让我长了记性

手动改 nginx.conf 手滑写错 try_files，SPA 路由全 404。之后彻底自动化：Push 到 release 分支 → GitHub Actions 测试构建 → 产物上传 CDN → 发版机器人通知。手动操作越少，背锅概率越低。

写在最后

工程化的本质不是工具多牛，而是踩过的坑有没有变成团队资产——文档、规范、自动化，这些才真正值钱。不管在哪写代码，把工程化做扎实，至少不用对着报错怀疑人生。