什么是前端工程化
前端工程化（Front-End Engineering）是用工程化的方法管理前端研发的全过程：目录结构、模块规范、构建打包、代码检查、测试、版本协作与自动化部署。它不教你怎么写某个具体页面，而是解决“团队如何稳定、高效地持续交付页面”的问题。
一个人写 demo，一个 HTML 文件就够了；但在十几人协作、几十个页面、每周发版的项目里，没有工程化就是灾难：代码风格混乱、构建慢、回归频发、各环境配置不一致。工程化的价值就四个字——降本增效：把重复劳动交给机器，把出错的地方用流程堵住。
- 三大支柱：模块化（拆分代码）、自动化（构建/测试/部署）、规范化（Lint/提交规范/代码审查）
- 工程化不等于 webpack：工具只是落地手段，体系贯穿研发全生命周期
- 衡量效果看四个数：构建速度、线上故障率、新人上手成本、发版频率
配置
// 一个典型工程项目长这样：脚本代替人肉操作 { "name": "my-app", "version": "1.0.0", "scripts": { "dev": "vite", // 启动开发服务器 "build": "vite build", // 生产打包 "preview": "vite preview", // 预览打包产物 "lint": "eslint src --ext .js,.vue", // 代码检查 "test": "vitest", // 跑测试 "deploy": "npm run build && npx gh-pages -d dist" // 一键部署 }, "dependencies": { "vue": "^3.4.0" }, "devDependencies": { "vite": "^5.0.0", "eslint": "^8.57.0", "vitest": "^1.6.0" } }
本节要点前端工程化 = 模块化 + 自动化 + 规范化；目标是让团队稳定、高效地持续交付。
