前端工程化：体系设计与实践

前端工程化包含一系列规范和流程，其可提升前端工程师的工作效率，加快Web开发迭代速度，是现在前端开发领域中非常重要的一环。《前端工程化：体系设计与实践》系统、全面地介绍了前端工程体系的各个环节，包括设计要点和实践经验。全书分为7章，分别是前端工程简史、脚手架、构建、本地开发服务器、部署、工作流、前端工程化的未来。

《前端工程化：体系设计与实践》适合对前端工程化有一定理解和实践的中高级前端工程师阅读，同样适合对前端工程化感兴趣的服务器端开发者以及运维人员阅读。

周俊鹏，1987年生人，天蝎座，5只猫和1只狗的铲屎官，大前端（客户端+Web Service）践行者。主要研究方向为前端工程化和Web应用层架构，好于研究事物的本质，并且乐于从宏观的角度解决问题。时任搜狗地图Web前端开发主管。

1.本书由周爱民老师倾情作序，美团技术总监赵强、搜狐高级技术经理邵充、Facebook软件工程师邓凌飞、ofo前端架构师代学辉联袂力荐。

2.本书系统、全面地介绍了前端工程体系的各个环节，包括设计要点和实践经验。全书分为7章，分别包括绪论、脚手架、构建、本地开发服务器、部署、工作流、前端工程化的未来。

3.前端工程化现在正处于不断探索的初级阶段，这本书提供了大量的前端工程师可借鉴、参考并投之于生产实作的实践，适合前端工程师进阶学习和参考。

推荐序

技术之外

前端工程体系是一种服务，以项目迭代过程中的前端开发为主要服务对象，涉及开发、构建、部署等环节。

——摘自《前端工程化：体系设计与实践》

阿里的玉伯曾经问过我一个问题：前端该不该碰业务？具体一点地说，就是前端要不要了解后端的业务逻辑，甚至将部分这样的逻辑与规则放在前端来处理与实现。我当时思考了片刻，给玉伯的建议是：前端还是不要碰业务逻辑，围绕着交互做就好了。

事实上这个问题的答案有很多，不同的场景下也可以各有权衡，所以上面的答案也并非标准答案。但我在这里提及这件事情的原因是：这个问题的前设、背景与分析过程，是技术无关的。显而易见，我们并没有讨论哪一种框架来解决何种技术问题，又或者在技术上如何做前后端分离。我们是在讨论一个根本上的工程协作问题：谁，该做什么？这个问题的关键点，就是“什么是领域划分的事实依据”。

前端的工程化，事实上还处在一个原始阶段。我们如今之所视，可以一言以蔽之：或在对语言内在功能特性的补充，或在对其外在组织能力的补充。这些种种补充，尽是在工程体系的“工具”这一隅上做的功夫。可以预见的是，在前端工程这个体系上前行，必然面临的问题是过程的优化和方法论的建立。然而如今前端在这些大的、根本性的问题上并没有任何触及，甚至连上面这样的“领域划分”问题都没有被认真地讨论过。

这些问题，也都如同开始的那个问题一样，是在技术之外。

所幸作者是意识到了这一点的。他在本书中将“前端工程体系”定义成一种服务，而非一种工程模型。从作者的定义来看，这个体系是可资实用的一种工具——可讨论、可实现，以及可以演化与重构，并遵循这些服务的设计原则、问题场景以及应用的约束。在我看来，这些内容才是书中的闪光点。

除此之外，本书还详细地讨论了其中有关脚手架、构建过程和本地工程化服务等现实中的工程实践所得，并为这些实践构画了一个参考模型。这使得本书提供了大量前端工程师可借鉴、参考并投之于生产实作的最佳实践。我想，作为结果，这些实践的优劣得失尚待时间验证，而作者在这一过程中的分析与观点，也可待业界指正评点。

而我所愿者，亦在读者能与我一道，在技术之外多做一点点观察。

周爱民

2017.11

前言

前端工程师这一岗位最初被独立分化出来专注于网页样式（CSS）的制作，目的是为了令Web开发者将更多的精力投入负责的业务逻辑中。然而随着Web技术的发展以及PC、移动智能终端设备性能和功能的提升，用户对于网站的需求也不断增加。市场的需求促进技术的革新，对于前端工程师的要求早已不仅仅是编写CSS了。资源的多样性和逻辑的复杂性一度令前端开发工作异常烦琐且难以维护，工作效率的降低直接导致Web产品的迭代速度变慢，前端工程化便是在此时代背景下应运而生的。

事实上，前端工程化目前的形态和生态仍然处于非常原始的阶段。每个团队甚至每个人由于存在研究领域（比如业务层和框架层）和业务类型（比如Google Map与淘宝）的差异，从而对前端工程化有不同的需求和定位。本书将前端工程化解读为一系列规范和流程的集合，它不是一个框架或者工具，聚焦的不是某个垂直的研究领域或者特殊的业务类型，而是一种可演化、可扩展的服务，服务的目标是解决前端开发以及前后端协作开发过程中的难点和痛点问题，涵盖项目的起始、开发、测试以及部署环节。工具是前端工程化的实现媒介，规范是工程化的指导方针，工作流程是工程化的外在表现形式以及约束规范的载体。

本书通过解析一个Web项目迭代过程中前端开发者面临的诸多问题，从工程化的角度给出对应的解决方案，最终将各个环节串联为完整的工作流。希望读者通过阅读本书可以对前端工程化要解决的问题有大致的了解，从而能够对读者自行实现工程化方案有所帮助。

目标读者

本书的主要目标读者是对前端工程化有一定理解和实践的中高级前端工程师，同样适用于对前端工程化感兴趣的服务器端开发者以及运维人员。本书假设读者熟悉Web站点的基本工作原理，尤其是前端与服务器端之间的协作流程，并且对HTTP协议、异步通信、模块化等知识有深入的理解。

示例代码

本书选取了一个简易的前端工程化解决方案Boi作为示例，这并不是一个完整形态的解决方案，但是它的许多理念可以作为论证本书观点的参考。读者可以从GitHub上获取其源码：https://github.com/boijs/boi。

内容概览

本书第1章以前端工程师从无到有直至发展至今的历程作为后续内容的起始。从历史中我们提炼出前端开发人员在一个Web项目迭代周期各个阶段面临的诸多问题，这些问题是前端工程化诞生的催化剂，也是指导工程方案设计的本源。之后，我们会按照Web项目从起始到发布的流程分别介绍前端工程化在各个阶段的需求和功能设计，比如脚手架在项目初期减少了重复的体力操作并且降低了业务框架学习成本；构建系统从编程语言、优化和部署 3 个角度解决了前端开发语言内在的缺陷以及由宿主客户端特性引起的开发和生产环境之间的差异性；本地开发服务器提供了前后端并行开发的平台；部署功能权衡速度、协作和安全，把控着Web产品上线前的最后一道关卡。最后将这些功能模块合理地串联为完整的工作流，便是前端工程化的完整外在形态。

前端工程师的定位在不同的年代甚至不同的团队中存在着巨大的差异，即使仅以目前的时间节点为标准也难以给前端工程师一个绝对明确的定义。岗位职责的变化促进了工程体系的演进，所以本书在最后的章节中阐述了一些对前端工程师未来定位的思考，同时探讨了与之对应的前端工程体系的演进形式。

以下是分章节介绍：

· 第1章 前端工程简史 讲述前端工程师的发展史、在团队中的定位，以及前后端分离和前端工程化的进化历程与基本形态。

· 第2章 脚手架 讲述作为前端项目起始阶段取代烦琐人工操作的脚手架必须具备的要素以及本质，通过剖析目前市面上的经典案例讲解实现脚手架过程中需要考虑的要点以及如何集成Yeoman到工程化方案中。

· 第3章 构建 讲述构建系统面临的问题以及对应的解决方案。构建是前端工程体系中功能最多、最复杂的模块，也是串联本地开发服务器、部署的关键，是实现工作流的核心模块。

· 第4章 本地开发服务器 讲述如何以Mock服务实现前后端并行开发，以及配合动态构建进一步提升前端工程师的开发效率。

· 第5章 部署 讲述部署功能如何权衡速度、协作和安全3个重要原则，以及前端静态资源特殊的部署策略。

· 第6章 工作流 讲述如何将既有的功能串联成完整的工作流。以速度见长的本地工作流和注重严谨的云平台工作流，两者各有优劣，适用于不同需求和不同规模的团队。

· 第7章 前端工程化的未来 讲述前端工程师如何选择进阶的方向以便适应未来的变化。前端工程化是服务于前端开发的，前端工程师定位的改变必然会引起工程化方案的调整。本章通过分析未来工程化不变和可变的方面，探讨前端工程化未来的表现形式。

“前端工程化系列”丛书

本书是“前端工程化系列”丛书之一，着重讲述辅助性质的工程体系设计和实践过程。前端工程化可以简单地理解为前端架构与工程体系的综合体，两者相辅相成。本系列丛书的后续作品将从综合的角度深层剖析架构与体系之间的关联及融合，讲述如何从宏观的角度打造合理的前端工程化生态。感兴趣的读者可以关注本系列丛书的相关动态。

联系作者

如果您在阅读过程中有任何问题，可以发送邮件到作者的个人邮箱：[email protected]。

致谢

感谢我的同事和领导在我创作本书期间给予的建议和支持。特别感谢我曾经的技术领导元亮，在与他共事期间我于前端工程领域的探索和研究得到了充分的空间和资源。

感谢电子工业出版社博文视点的编辑付睿，她在编辑和审校本书期间提出了宝贵的意见。

最后，感谢我的朋友、父母以及妻子刘女士在我创作本书期间给予的空间和支持。

读者服务

轻松注册成为博文视点社区用户（www.broadview.com.cn），扫码直达本书页面。

· 提交勘误：您对书中内容的修改意见可在 提交勘误 处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。

· 交流互动：在页面下方 读者评论 处留下您的疑问或观点，与我们和其他读者一同学习交流。

页面入口：http://www.broadview.com.cn/33090

第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