1.本书由周爱民老师倾情作序,美团技术总监赵强、搜狐高级技术经理邵充、Facebook软件工程师邓凌飞、ofo前端架构师代学辉联袂力荐。
2.本书系统、全面地介绍了前端工程体系的各个环节,包括设计要点和实践经验。全书分为7章,分别包括绪论、脚手架、构建、本地开发服务器、部署、工作流、前端工程化的未来。
3.本书以本地工具链形态的前端工程化方案Boi为例,以Yeoman为内核的脚手架、以Express承载本地服务器、以webpack为内核的构建系统、基于SFTP协议的远程部署功能,这个方案的很多理念可以作为论证本书观点的参考。
4.前端工程化现在正处于不断探索的初级阶段,这本书提供了大量的前端工程师可借鉴、参考并投之于生产实作的实践,适合前端工程师进阶学习和参考。
前端工程化包含一系列规范和流程,其可提升前端工程师的工作效率,加快Web开发迭代速度,是现在前端开发领域中非常重要的一环。《前端工程化:体系设计与实践》系统、全面地介绍了前端工程体系的各个环节,包括设计要点和实践经验。全书分为7章,分别是前端工程简史、脚手架、构建、本地开发服务器、部署、工作流、前端工程化的未来。
《前端工程化:体系设计与实践》适合对前端工程化有一定理解和实践的中高级前端工程师阅读,同样适合对前端工程化感兴趣的服务器端开发者以及运维人员阅读。
周俊鹏,1987年生人,天蝎座,5只猫和1只狗的铲屎官,大前端(客户端+Web Service)践行者。主要研究方向为前端工程化和Web应用层架构,好于研究事物的本质,并且乐于从宏观的角度解决问题。时任搜狗地图Web前端开发主管。
前端技术栈在Web 2.0时代来临后,搭上了高速列车,几年时间里迅速完成了从面向过程到面向对象的转变。但对于前端工程师来说研发效率一直是一个痛点。有幸在与俊鹏同学共事期间,见证了其积极探索并付诸实践地尝试改变现状,通过Boi框架来将思想落地并将其开源出来,从而让更多前端小伙伴从中受益。本书更是体系化地介绍了前端工程体系设计思想,适合前端工程师进阶学习和参考。
——美团技术总监 赵强
看到有关前端工程化的书,回想自己从事Web开发的历程,感受到现在的前端工程师正处在前端编程飞速发展的时期。如果你没有做过美工(早期前端工程师的统称)或者维护过一个超过3000行的JavaScript代码文件,可能会无法理解工程化带来的收益。本书很详细地讲解了前端项目从构建到发布的完整过程,对于已经有开发经验的前端工程师来说,可以用于梳理现有项目结构、进行代码重构,也可为准备进入前端领域的新工程师指明学习前端知识的路线。
——搜狐高级技术经理 邵充
Web产品的需求和技术的进化是非常迅速的,前端领域尤为明显。开发人员需要考虑功能、交互、UI的实现,并且兼顾用户体验与性能。逻辑与架构复杂度的提升是一个熵增的过程,无序、耦合等因素困扰着Web开发人员,严重拖累了工作效率。工程化以严谨的、规范的工作流程,将无序化有序,将耦合化松散。本书剖析了建设前端工程体系需要考虑的各方面因素,为刚刚踏入前端工程领域的开发者和团队提供了优质的参考。
——Facebook Software Engineer 邓凌飞
俊鹏是我的前同事,其多年丰富的经验在本书内体现得淋漓尽致。他站在架构师的高度,将前端工程化工作流实践整理成书,独具特色。特别适合中高级前端研发人员或有志从事前端架构相关工作的人员研读。
——ofo前端架构师 代学辉
第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
推荐序
技术之外
前端工程体系是一种服务,以项目迭代过程中的前端开发为主要服务对象,涉及开发、构建、部署等环节。
——摘自《前端工程化:体系设计与实践》
阿里的玉伯曾经问过我一个问题:前端该不该碰业务?具体一点地说,就是前端要不要了解后端的业务逻辑,甚至将部分这样的逻辑与规则放在前端来处理与实现。我当时思考了片刻,给玉伯的建议是:前端还是不要碰业务逻辑,围绕着交互做就好了。
事实上这个问题的答案有很多,不同的场景下也可以各有权衡,所以上面的答案也并非标准答案。但我在这里提及这件事情的原因是:这个问题的前设、背景与分析过程,是技术无关的。显而易见,我们并没有讨论哪一种框架来解决何种技术问题,又或者在技术上如何做前后端分离。我们是在讨论一个根本上的工程协作问题:谁,该做什么?这个问题的关键点,就是“什么是领域划分的事实依据”。
前端的工程化,事实上还处在一个原始阶段。我们如今之所视,可以一言以蔽之:或在对语言内在功能特性的补充,或在对其外在组织能力的补充。这些种种补充,尽是在工程体系的“工具”这一隅上做的功夫。可以预见的是,在前端工程这个体系上前行,必然面临的问题是过程的优化和方法论的建立。然而如今前端在这些大的、根本性的问题上并没有任何触及,甚至连上面这样的“领域划分”问题都没有被认真地讨论过。
这些问题,也都如同开始的那个问题一样,是在技术之外。
所幸作者是意识到了这一点的。他在本书中将“前端工程体系”定义成一种服务,而非一种工程模型。从作者的定义来看,这个体系是可资实用的一种工具——可讨论、可实现,以及可以演化与重构,并遵循这些服务的设计原则、问题场景以及应用的约束。在我看来,这些内容才是书中的闪光点。
除此之外,本书还详细地讨论了其中有关脚手架、构建过程和本地工程化服务等现实中的工程实践所得,并为这些实践构画了一个参考模型。这使得本书提供了大量前端工程师可借鉴、参考并投之于生产实作的最佳实践。我想,作为结果,这些实践的优劣得失尚待时间验证,而作者在这一过程中的分析与观点,也可待业界指正评点。
而我所愿者,亦在读者能与我一道,在技术之外多做一点点观察。
周爱民
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章 前端工程化的未来 讲述前端工程师如何选择进阶的方向以便适应未来的变化。前端工程化是服务于前端开发的,前端工程师定位的改变必然会引起工程化方案的调整。本章通过分析未来工程化不变和可变的方面,探讨前端工程化未来的表现形式。
“前端工程化系列”丛书
本书是“前端工程化系列”丛书之一,着重讲述辅助性质的工程体系设计和实践过程。前端工程化可以简单地理解为前端架构与工程体系的综合体,两者相辅相成。本系列丛书的后续作品将从综合的角度深层剖析架构与体系之间的关联及融合,讲述如何从宏观的角度打造合理的前端工程化生态。感兴趣的读者可以关注本系列丛书的相关动态。
联系作者
如果您在阅读过程中有任何问题,可以发送邮件到作者的个人邮箱:zjp0432@163.com。
致谢
感谢我的同事和领导在我创作本书期间给予的建议和支持。特别感谢我曾经的技术领导元亮,在与他共事期间我于前端工程领域的探索和研究得到了充分的空间和资源。
感谢电子工业出版社博文视点的编辑付睿,她在编辑和审校本书期间提出了宝贵的意见。
最后,感谢我的朋友、父母以及妻子刘女士在我创作本书期间给予的空间和支持。
读者服务
轻松注册成为博文视点社区用户(www.broadview.com.cn),扫码直达本书页面。
· 提交勘误:您对书中内容的修改意见可在 提交勘误 处提交,若被采纳,将获赠博文视点社区积分(在您购买电子书时,积分可用来抵扣相应金额)。
· 交流互动:在页面下方 读者评论 处留下您的疑问或观点,与我们和其他读者一同学习交流。
页面入口:http://www.broadview.com.cn/33090
这本书的精髓,在于它不仅仅停留在“术”的层面,更是深入到“道”的层面,为前端工程化提供了一套完整的“体系设计”思路。我一直觉得,很多前端书籍都过于强调具体工具的使用,而忽略了背后的设计原则和架构思想。这本书则完全不同,它从宏观的视角出发,为我们勾勒出了一个完整、可扩展的前端工程化蓝图。我尤其欣赏它在“项目架构与演进”部分的内容。 它不只是告诉你如何搭建一个项目,更是教你如何去设计一个能够适应未来变化的项目架构。书中关于“微前端”、“服务化”等前沿概念的介绍,以及它们在实际场景中的应用,都让我大开眼界。我之前对微前端的概念只是听说过,但对它如何实现、面临的挑战以及如何选择合适的方案,一直感到困惑。这本书则给予了非常详尽的解答,让我能够更清晰地认识到微前端的价值和落地路径。它让我明白,优秀的前端工程化,不仅仅是为了解决当前的问题,更是为了构建一个能够持续发展和演进的健康生态。
评分讲实话,读这本书的过程,我时常会停下来思考。它不仅仅是技术手册,更像是对前端开发本质的一次深度挖掘。我尤其欣赏作者在“代码规范与质量保障”这块的论述,它把静态代码分析、代码审查、甚至一些高级的AST(抽象语法树)应用都讲得非常透彻。我之前以为ESLint和Prettier就是规范的全部了,但这本书让我看到了更广阔的天地,比如如何利用AST来自动化一些复杂的代码检查和重构,这对我来说是全新的启发。 书中关于“性能优化”的章节,更是让我受益匪浅。它不只是停留在前端加载速度上,还深入到服务端渲染(SSR)、预渲染(Prerendering)、甚至一些浏览器底层渲染机制的介绍。我之前做性能优化,很多时候是凭感觉,知道哪里慢就改哪里。但这本书给出了一个非常清晰的体系化方法论,从瀑布图分析到具体的优化点,层层递进,让我能够有针对性地去解决问题,而不是盲目地尝试。读完这部分,我感觉自己的性能优化能力得到了质的飞跃,能够更自信地去应对各种性能挑战。
评分这本书的内容,绝对是我近几年来读过的最实在、最有价值的一本技术书籍。我一直对“前端工程化”这个词既熟悉又陌生,知道它很重要,但具体包含哪些方面,如何落地,却总是模模糊糊。这本书就像一个清晰的路线图,把我从混沌中拉了出来。它在“团队协作与流程建设”这块的论述,给我带来了巨大的启发。我一直以为工程化是纯粹的技术问题,但这本书让我认识到,一个高效的前端团队,离不开良好的协作和流程。 它详细讲解了如何通过 CI/CD(持续集成/持续部署)来自动化构建、测试和部署流程,这极大地提高了开发效率和发布频率。我之前对CI/CD的概念只是模糊的了解,但这本书的讲解,让我清晰地看到了它在实际项目中的应用,以及它能带来的实际好处。另外,书中对于“知识沉淀与分享”这块的强调,也让我反思了很多。一个成熟的工程化体系,必然伴随着知识的不断积累和传承,而这本书恰恰为我们提供了构建这种体系的思路和方法。
评分这本书的内容,可以说是颠覆了我对前端开发的一些固有认知。我之前一直以为,前端工程化的重点在于“用好各种工具”,比如Webpack、Babel、ESLint等等。但这本书让我意识到,工具只是手段,核心在于“体系”。它强调的是一种思维方式,一种构建高质量前端项目的战略。书中对于“版本管理”、“灰度发布”、“监控体系”等方面的论述,让我看到了一个成熟的前端团队应该具备的视野和能力。 我尤其对书中关于“测试体系”的章节印象深刻。过去我总觉得前端测试是个可有可无的环节,写测试代码会拖慢开发速度。但这本书的讲解,让我明白了为什么测试是工程化不可或缺的一部分,以及如何构建一个有效的测试策略,从单元测试、集成测试到端到端测试,都有细致的讲解和案例。它让我明白,良好的测试体系不仅能提升代码质量,更能减少后期维护成本,甚至能够加速开发流程。读完这部分,我开始重新审视自己项目中的测试现状,并计划逐步引入更全面的测试方案。
评分这本书我真的太爱了!作为一个入了前端坑几年,但总觉得瓶颈期的开发者,这本书就像给我指明了方向的灯塔。我一直觉得前端工程化是个很虚的概念,知道它重要,但具体要怎么做,从哪里入手,一直很模糊。这本书的内容,特别是关于“体系设计”的部分,简直是把这个庞大的概念拆解得明明白白。它不是那种告诉你“用这个工具能解决XX问题”的书,而是从更宏观的视角,教你如何构建一个健康、可维护、高性能的前端项目体系。 我特别喜欢它在讲到“模块化”、“组件化”、“构建优化”这些基础内容时,不是停留在工具的介绍,而是深入分析了背后的设计理念和权衡。比如,讲到模块化时,它会对比不同模块化方案的优劣,以及在不同场景下如何选择,甚至会提及一些不常见的但非常有用的实践。还有在构建优化部分,它不仅仅是罗列各种webpack配置项,而是从打包体积、加载速度、缓存策略等多个维度,给出了非常系统性的思考路径。读完这部分,我突然觉得之前那些零散的优化尝试都变得有理有据了,不再是“碰运气”式的修改了。
评分书还没看,等过段时间看完后再追加评论吧,好不好
评分还不错,感觉棒棒哒
评分你不知道为什么这么早睡早起的我好讨厌的感觉?这种人不知道为什么要被自己感动吃什么
评分还没看
评分京东商城给予的优质的服务,从仓储管理、物流配送等各方面都是做的非常好的。送货及时,配送员也非常的热情,有时候不方便收件的时候,也安排时间另行配送。同时京东商城在售后管理上也非常好的,以解客户忧患,排除万难
评分刚收到,期待,看看,研究下会有更大进步哦。学习每一天
评分前端工程化包含一系列规范和流程,其可提升前端工程师的工作效率,加快Web开发迭代速度,是现在前端开发领域中非常重要的一环。《前端工程化:体系设计与实践》系统、全面地介绍了前端工程体系的各个环节,包括设计要点和实践经验。
评分还可以......
评分还没看。。。。。。。。。。。
本站所有内容均为互联网搜索引擎提供的公开搜索信息,本站不存储任何数据与内容,任何内容与数据均与本站无关,如有需要请联系相关搜索引擎包括但不限于百度,google,bing,sogou 等
© 2025 book.teaonline.club All Rights Reserved. 图书大百科 版权所有