本书将前端工程化解读为一系列规范和流程的集合,它不是一个框架或者工具,聚焦的不是某个垂直的研究领域或者特殊的业务类型,而是一种可演化、可扩展的服务,服务的目标是解决前端开发以及前后端协作开发过程中的难点和痛点问题,涵盖项目的起始、开发、测试以及部署环节。工具是前端工程化的实现媒介,规范是工程化的指导方针,工作流程是工程化的外在表现形式以及约束规范的载体。
本书通过解析一个Web项目迭代过程中前端开发者面临的诸多问题,从工程化的角度给出对应的解决方案,最终将各个环节串联为完整的工作流。希望读者通过阅读本书可以对前端工程化要解决的问题有大致的了解,从而能够对读者自行实现工程化方案有所帮助。
源码
https://github.com/boijs/boi
· 第1章 前端工程简史 讲述前端工程师的发展史、在团队中的定位,以及前后端分离和前端工程化的进化历程与基本形态。
· 第2章 脚手架 讲述作为前端项目起始阶段取代烦琐人工操作的脚手架必须具备的要素以及本质,通过剖析目前市面上的经典案例讲解实现脚手架过程中需要考虑的要点以及如何集成Yeoman到工程化方案中。
· 第3章 构建 讲述构建系统面临的问题以及对应的解决方案。构建是前端工程体系中功能最多、最复杂的模块,也是串联本地开发服务器、部署的关键,是实现工作流的核心模块。
· 第4章 本地开发服务器 讲述如何以Mock服务实现前后端并行开发,以及配合动态构建进一步提升前端工程师的开发效率。
· 第5章 部署 讲述部署功能如何权衡速度、协作和安全3个重要原则,以及前端静态资源特殊的部署策略。
· 第6章 工作流 讲述如何将既有的功能串联成完整的工作流。以速度见长的本地工作流和注重严谨的云平台工作流,两者各有优劣,适用于不同需求和不同规模的团队。
· 第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