前端工程化:体系设计与实践
  • 推荐2
  • 收藏5
  • 浏览1.6K

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

周俊鹏 (作者)  付睿 (责任编辑)

  • 书  号:978-7-121-33090-2
  • 出版日期:2018-01-01
  • 页  数:224
  • 开  本:16(185*235)
  • 出版状态:上市销售
  • 维护人:付睿

相关图书

Python数据分析:基于Plotly的动态可视化绘图

孙洋洋 (作者)

随着信息技术的发展和硬件设备成本的降低,当今的互联网存在海量的数据,想要快速从这些数据中获取更多有效的信息,数据可视化是重要的一环。对Python语言来说,比较...

¥79.00

Tableau商业分析一点通

美智讯(Bizinsight) (作者)

2015 年,美智讯公司与沈浩老师合作撰写了国内第一本中文 Tableau 书:《触手可及的大数据分析工具——Tableau 案例集》。该书经过了多次重印,发行...

 

Node.js调试指南(全彩)

赵坤 (作者)

《Node.js调试指南(全彩)》从CPU、内存、代码、工具、APM、日志、监控、应用这8 个方面讲解如何调试 Node.js,大部分小节都会以一段经典的问题代...

¥89.00

指尖上的效率,Excel快捷键手册

林书明 (作者)

这是一本Excel 快捷键手册,也是一本Excel 技巧学习资料。单纯的快捷键列表不会让你收获更多,带有生动案例的讲解才能让你获得Excel 知识和技能的双丰收...

¥29.00

白话统计

冯国双 (作者)

一本书如果没有作者自己的观点,而只是知识的堆叠,那么这类书是没有太大价值的。尤其<br>在当前网络发达的时代,几乎任何概念和知识点都可以从网络上查到。但是有一点...

¥69.00

运营进阶:数据化营销实战

沈宣辰 (作者)

本书是对数据化运营在实际工作中的全方位解读。<br>本书内容主要包括运营工作中使用的工具和方法,并且以 SEM 和 DSP 两类营销工具作为<br>切入点,深入...

¥59.00
前端工程化包含一系列规范和流程,其可提升前端工程师的工作效率,加快Web开发迭代速度,是现在前端开发领域中非常重要的一环。本书系统、全面地介绍了前端工程体系的各个环节,包括设计要点和实践经验。全书分为7章,分别包括绪论、脚手架、构建、本地开发服务器、部署、工作流、前端工程化的未来。
前端工程化可以提升前端工程师的工作效率,本书全面、系统地介绍了前端工程体系各个环节的设计要点和实践经验,引导读者深入思考并积极实践。
周俊鹏
1987年生人,天蝎座,5只猫和1只狗的铲屎官,大前端(客户端+Web Service)践行者。主要研究方向为前端工程化和Web应用层架构,好于研究事物的本质,并且乐于从宏观的角度解决问题。时任搜狗地图Web前端开发主管。
前言


前端工程师这一岗位最初被独立分化出来专注于网页样式(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

目录

目录


第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

本书勘误

印次
  • 页码:14  •  行数:11  •  印次: 1  •  修订印次: 1

    Dreamweaver属于adobe公司,并非微软。

    liuhw0536 提交于 2018/2/4 13:21:51
    付睿 确认于 2018/2/6 12:52:31
  • 页码:43  •  行数:3  •  印次: 3

    本章是一种……改为本意是一种……

    付睿 提交于 2018/5/22 12:22:11
    付睿 确认于 2018/5/22 15:45:52
  • 页码:60  •  行数:5  •  印次: 3

    this.options. appname多了一个空格

    付睿 提交于 2018/5/22 12:24:22
    付睿 确认于 2018/5/22 15:45:43
  • 页码:121  •  行数:4  •  印次: 3

    同步模块module.async.js应该为module.sync.js

    付睿 提交于 2018/5/22 12:25:10
    付睿 确认于 2018/5/22 15:45:36
  • 页码:153  •  行数:14  •  印次: 3

    HMLT改为HTML

    付睿 提交于 2018/5/22 12:28:45
    付睿 确认于 2018/5/22 15:45:29

读者评论

  • 买了书了,还想问问有没有电子版的?

    tonyg发表于 2018/4/21 22:07:34
    • 有电子版,应该亚马逊等网店都有卖

      付睿发表于 2018/5/4 16:58:50
  • 书中第三章有提到仅在webpack中配置babel-loader和vue-loader不会对.vue为后缀的单文件中<script>n内的代码进行编译,但是,我在vue-loader中文档中看到‘当项目中配置了 babel-loader 或者 buble-loader,vue-loader 会使用他们处理所有 .vue 文件中的 <script> 部分’,关于这部分内容和文档存在差异。

    zepang发表于 2018/3/21 21:47:22
    • 读者朋友您好~作者的答复如下:
      babel-loader有两种配置方式。一种是直接在webpack配置文件里的module里进行配置,语法如下{loader:'babel-loader',options: {...}}。一种是通过.babelrc文件配置。第一种配置方式对vue文件是无效的,这也是书里要表达的意思,结合上下文语境能够得到这样的信息。书里提倡用babelrc文件进行配置,这也是通过上下文语境得出的结论。建议您仔细阅读这一章节,揣摩上下文的语境。

      付睿发表于 2018/3/22 9:59:03

图书类别

相关博文

  • 一个前端工程师的基本修养

    一个前端工程师的基本修养

    Jessica瑾妞 2018-01-23

    有人说互联网是前端工程师的舞台,先不论这个说法是否有些夸大其词,但前端工程师绝对撑起了互联网应用开发的“半壁江山”。随着传统网站、手机应用、桌面应用、微信小程序等次第出现,需要前端工程师设计和完成的客户端功能逻辑在不断复杂化。那么,应...

    Jessica瑾妞 2018-01-23
    178 0 0 0