1.本书由周爱民老师倾情作序,美团技术总监赵强、搜狐高级技术经理邵充、Facebook软件工程师邓凌飞、ofo前端架构师代学辉联袂力荐。
2.本书系统、全面地介绍了前端工程体系的各个环节,包括设计要点和实践经验。全书分为7章,分别包括绪论、脚手架、构建、本地开发服务器、部署、工作流、前端工程化的未来。
3.本书以本地工具链形态的前端工程化方案Boi为例,以Yeoman为内核的脚手架、以Express承载本地服务器、以webpack为内核的构建系统、基于SFTP协议的远程部署功能,这个方案的很多理念可以作为论证本书观点的参考。
4.前端工程化现在正处于不断探索的初级阶段,这本书提供了大量的前端工程师可借鉴、参考并投之于生产实作的实践,适合前端工程师进阶学习和参考。
前端工程化包含一系列规范和流程,其可提升前端工程师的工作效率,加快Web开发迭代速度,是现在前端开发领域中非常重要的一环。《前端工程化:体系设计与实践》系统、全面地介绍了前端工程体系的各个环节,包括设计要点和实践经验。全书分为7章,分别是前端工程简史、脚手架、构建、本地开发服务器、部署、工作流、前端工程化的未来。
《前端工程化:体系设计与实践》适合对前端工程化有一定理解和实践的中高级前端工程师阅读,同样适合对前端工程化感兴趣的服务器端开发者以及运维人员阅读。
第1章 前端工程简史 1
1.1 前端工程师的基本素养 2
1.1.1 前端工程师的发展历史 2
1.1.2 前端工程师的技能栈 3
1.2 Node.js带给前端的改革 7
1.2.1 前端的两次新生 7
1.2.2 Node.js带来的改革 9
1.3 前后端分离 12
1.3.1 原始的前后端开发模式 13
1.3.2 前后端分离的基本模式 14
1.3.3 前后端分离与前端工程化 19
1.4 前端工程化 19
1.4.1 前端工程化的衡量准则 20
1.4.2 前端工程化的进化历程 21
1.4.3 前端工程化的3个阶段 32
1.5 工程化方案架构 34
1.5.1 webpack 34
1.5.2 工程化方案的整体架构 36
1.5.3 功能规划 37
1.5.4 设计原则 41
1.6 总结 42
第2章 脚手架 43
2.1 脚手架的功能和本质 44
2.2 脚手架在前端工程中的角色和特征 45
2.2.1 用完即弃的发起者角色 45
2.2.2 局限于本地的执行环境 47
2.2.3 多样性的实现模式 49
2.3 开源脚手架案例剖析 51
2.4 集成Yeoman封装脚手架方案 56
2.4.1 封装脚手架方案 57
2.4.2 集成到工程化体系中 63
2.5 总结 66
第3章 构建 68
3.1 构建功能解决的问题 68
3.2 配置API设计原则和编程范式约束 71
3.2.1 配置API设计 71
3.2.2 编程范式约束 75
3.3 ECMAScript与Babel 76
3.3.1 ECMAScript发展史 76
3.3.2 ES6的跨时代意义 78
3.3.3 Babel——真正意义的JavaScript编译 80
3.3.4 结合webpack与Babel实现JavaScript构建 84
3.4 CSS预编译与PostCSS 89
3.4.1 CSS的缺陷 90
3.4.2 CSS预编译器 90
3.4.3 PostCSS 91
3.4.4 webpack结合预编译与PostCSS实现CSS构建 93
3.4.5 案例:自动生成CSS Sprites功能实现 95
3.5 模块化开发 101
3.5.1 模块化与组件化 101
3.5.2 模块化与工程化 102
3.5.3 模块化开发的价值 103
3.5.4 前端模块化发展史 107
3.5.5 webpack模块化构建 109
3.6 增量更新与缓存 112
3.6.1 HTTP缓存策略 113
3.6.2 覆盖更新与增量更新 117
3.6.3 按需加载与多模块架构场景下的增量更新 120
3.6.4 webpack实现增量更新构建方案 122
3.7 资源定位 128
3.7.1 资源定位的历史变迁 128
3.7.2 常规的资源定位思维 132
3.7.3 webpack的逆向注入模式 132
3.8 总结 147
第4章 本地开发服务器 149
4.1 本地开发服务器解决的问题 150
4.2 动态构建 152
4.2.1 webpack-dev-middleware 152
4.2.2 Livereload和HMR 157
4.3 Mock服务 161
4.3.1 Mock的必要前提和发展进程 162
4.3.2 异步数据接口 166
4.3.3 SSR 172
4.4 总结 174
第5章 部署 175
5.1 部署流程的设计原则 175
5.1.1 速度——化繁为简 177
5.1.2 协作——代码审查和部署队列 181
5.1.3 安全——严格审查和权限控制 184
5.2 流程之外:前端静态资源的部署策略 186
5.2.1 协商缓存与强制缓存 186
5.2.2 Apache设置缓存策略 186
5.3 总结 190
第6章 工作流 191
6.1 本地工作流 192
6.1.1 二次构建的隐患 193
6.1.2 代码分离与测试沙箱 194
6.2 云平台工作流 197
6.2.1 GitFlow与版本管理 199
6.2.2 WebHook与自动构建 201
6.3 持续集成与持续交付 203
6.4 总结 205
第7章 前端工程化的未来 206
7.1 前端工程师未来的定位 206
7.1.1 不只是浏览器 207
7.1.2 也不只是Web 208
7.2 前端工程化是一张蓝图 209
7.3 总结 212
前端技术栈在Web 2.0时代来临后,搭上了高速列车,几年时间里迅速完成了从面向过程到面向对象的转变。但对于前端工程师来说研发效率一直是一个痛点。有幸在与俊鹏同学共事期间,见证了其积极探索并付诸实践地尝试改变现状,通过Boi框架来将思想落地并将其开源出来,从而让更多前端小伙伴从中受益。本书更是体系化地介绍了前端工程体系设计思想,适合前端工程师进阶学习和参考。
——美团技术总监 赵强
看到有关前端工程化的书,回想自己从事Web开发的历程,感受到现在的前端工程师正处在前端编程飞速发展的时期。如果你没有做过美工(早期前端工程师的统称)或者维护过一个超过3000行的JavaScript代码文件,可能会无法理解工程化带来的收益。本书很详细地讲解了前端项目从构建到发布的完整过程,对于已经有开发经验的前端工程师来说,可以用于梳理现有项目结构、进行代码重构,也可为准备进入前端领域的新工程师指明学习前端知识的路线。
——搜狐高级技术经理 邵充
Web产品的需求和技术的进化是非常迅速的,前端领域尤为明显。开发人员需要考虑功能、交互、UI的实现,并且兼顾用户体验与性能。逻辑与架构复杂度的提升是一个熵增的过程,无序、耦合等因素困扰着Web开发人员,严重拖累了工作效率。工程化以严谨的、规范的工作流程,将无序化有序,将耦合化松散。本书剖析了建设前端工程体系需要考虑的各方面因素,为刚刚踏入前端工程领域的开发者和团队提供了优质的参考。
——Facebook Software Engineer 邓凌飞
俊鹏是我的前同事,其多年丰富的经验在本书内体现得淋漓尽致。他站在架构师的高度,将前端工程化工作流实践整理成书,独具特色。特别适合中高级前端研发人员或有志从事前端架构相关工作的人员研读。
——ofo前端架构师 代学辉