第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