前言

随着技术的不断发展，Web前端也从最初的“页面切图”逐渐变为“万物皆可JS”的大前端体系。同样地，Web前端领域的“小作坊”式的页面搭建，发展成为如今丰富且庞杂的工程体系。

笔者从业Web领域近10年，经历了前端发展的“农耕时代”到“云边端时代”的变迁，也从最初的“切图仔”渐渐成为业务工程的架构设计者。尽管目前前端工程生态已经发展得十分迅猛，但相较于软件工程领域的其他工程化建设，前端工程化仍有很长的路要走。笔者有幸参与了前端工程链路的基础建设，结合业界成熟的工程方案与工具并利用企业和团队的资源，为企业降本增效及前端工程化领域实践贡献了些许力量，所以笔者打算通过编写图书的形式，对前端工程化的体系架构进行总结，并结合基础建设的实践经验，将工程化的思想与方法分享给读者。

本书以工程化为核心，以体系架构和基础建设为出发点，通过基础篇、进阶篇及实践篇分别介绍前端工程化的体系全貌。读者可以通过阅读本书，快速地掌握前端工程化所涉及的范畴与工具，笔者希望本书能够帮助读者了解前端工程化，成为入门前端工程领域的“敲门砖”。通过编写本书内容，笔者总结了大量工程工具原理与架构设计理念，也查阅了大量的官方文档，并结合已有的项目实践复盘总结整体的前端工程化体系，这也使笔者有了更深层次的提升与感悟。

本书主要内容

基础篇包括第1~8章： 

第1章主要介绍前端的发展历史及细分方向，并明确了前端工程化的定义及研究的范围。

第2章主要介绍前端工程中的Vue、React、Angular、Svelte框架的发展历史、设计哲学、生态系统及各个框架的对比总结。

第3章主要介绍前端工程中的组件库方案，以Element UI和Ant Design开源组件库体系为例，着重对指南、组件、主题、国际化、文档及资源进行介绍。

第4章主要介绍前端工程中的包管理方案，分别对NPM、YARN、PNPM、Lerna的包管理方案进行总结归纳，结合各个包管理的优劣势进行分析介绍。

第5章主要介绍前端工程领域的重点工具——打包器，通过对Webpack、Rollup、Gulp及Vite的实现方式及源码分析，对比总结各个打包器适用场景的优缺点。

第6章主要介绍前端工程中的规范管理，包括编码规范和版本管理。

第7章主要介绍前端工程中所涉及的测试库，通过Jest、Karma、Jasmine对比不同测试粒度下的工具方案。

第8章主要介绍前端工程化过程中的CICD流程，以Jenkins及GitLab CI为例，分别介绍常见的持续集成、持续部署、持续交付工具。

进阶篇包括第9~14章： 

第9章主要介绍前端工程化在研发流程中的物料资产，包括工程模板和最佳实践。

第10章主要介绍前端工程化在开发领域的涉猎范围，通过脚手架、配置及Mock进行介绍。

第11章主要介绍前端工程化的构建方案，包括本地构建、泛云端构建及多语言构建。

第12章主要介绍前端工程化对测试工程的介入，分别介绍单元测试、集成测试及UI测试的作用与区别。

第13章主要介绍前端工程化中的发布控制，分别对发布策略及权限控制进行阐述。

第14章主要介绍前端工程中的埋点监控，分别对性能监控、错误监控及行为监控所涉及的内容进行阐述，并简单介绍整个监控体系所涉及的内容。

实践篇包括第15~21章： 

第15章主要介绍前端工程化对产品设计流程进行扩展，分别对产品文档和产品原型的工程建设进行介绍。

第16章主要介绍前端工程化对UX/UI设计流程中的支撑，分别介绍图床、设计工具插件及走查平台的工程能力建设。

第17章主要介绍前端工程化在前端开发流程中的基础建设，分别通过Lint规范、Babel插件、微前端及监控SDK的实践方案进行介绍。

第18章主要介绍前端工程化在后端开发流程中的涉猎，分别通过BFF、Serverless及网关实践方案进行介绍。

第19章主要介绍前端工程化在测试开发流程中的相关实践，包括测试套件和测试平台。

第20章主要介绍前端工程的运维实践，包括故事板、私有仓库和云平台。

第21章主要介绍前端工程化的完整体系结构，并展望前端工程师的定位及未来发展趋势。

阅读建议

本书是一本关于前端工程化的技术教程，既包括对架构方案的设计，又提供了核心的原理分析。本书的原理剖析部分均来自开源仓库，案例实践提供了完整的代码示例，并将源代码开源到线上，这样可以帮助读者更好地进行学习借鉴。

建议各位读者可以将本书作为入门前端工程化的“武功心法”，学习其中的思想观与方法论，做到触类旁通并可举一反三。由于本书涉猎的是前端工程化的体系化叙述，每章节所涉及的原理都着重对架构层面进行考量，而对于每个知识内容所涉及的技法与实操所述不够详细，希望各位读者能够结合本书所阐述的理念和观点，对章节中的专项内容进行重难点攻关与突破。

资源下载提示

素材（源码）等资源： 扫描目录上方的二维码下载。

视频等资源： 扫描封底的文泉云盘防盗码，再扫描书中相应章节的二维码，可以在线学习。


由于时间仓促及笔者视野所限，书中难免存在疏漏之处，请各位读者见谅，并希望能够提出宝贵意见。


李恒谦2024年10月