《前端工程化:体系设计与实践》是一本系统、全面地介绍前端工程体系的优秀书籍。本书涵盖了前端工程化的各个环节,从体系设计到实践经验都有详尽的介绍。阅读本书可以帮助前端工程师了解前端工程化的重要性,掌握一系列规范和流程,提升工作效率,加快Web开发迭代速度。这本书以设计要点和实践经验为主题,内容丰富,实用性强。对于现在前端开发领域非常重要的一环,前端工程化,本书给出了有价值的指导和建议。无论是初学者还是有一定经验的前端工程师,都可以从本书中获得启发和提升。
前端工程化:体系设计与实践
读者评价
挺杂的,作者主要在介绍自己的框架.内容是确实也涵盖了"制作"一个前端框架的思路.可能是功力不够,有点硬着头皮看的感觉.作为前端入门,当前目标还是用好现有工具.
最有价值的仅最后二页… 简单的说…回顾了一下所在团队现状的来由…将自己的最佳实践变成了一本书… 核心只是一组靠谱的工具箱… 没敢涉及前端团队和其它团队的工程关系… 的确很中国
适合梳理思路,在 dev sever 章节之后,内容就比较泛了
内容介绍
前端工程化包含一系列规范和流程,其可提升前端工程师的工作效率,加快Web开发迭代速度,是现在前端开发领域中非常重要的一环。前端工程化:体系设计与实践》系统、全面地介绍了前端工程体系的各个环节,包括设计要点和实践经验。全书分为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
大约78年前,前端工程师还不是一个受人重视的职位,日常工作也就是切个图,使用JQuery写个脚本,从某种意义上讲,只是后端的附属物。最近几年,尤其是在nodejs出现之后,前端越来越受到重视,甚至已经开始抢占了后端的市场。这同时也带来了一个问题,前端的规模越来越大,已经上升到了工程学的问题,如何提高前端工程师的开发效率变得非常重要。这就是前端工程化所要解决的问题。前端工程化是根据业务特点,将前端开发流程规范化,标准化,它包括了开发流程,技术选型,代码规范,构建发布等,用于提升前端工程师的开发效率和代码质量.
模块化和组件化 很多人会混淆模块化开发和组件化开发。但是严格来讲,组件(component)和模块(module)应该是两个不同的概念。两者的区别主要在颗粒度方面。 简单讲,module侧重的是对属性的封装,重心是在设计和开发阶段,不关注runtime的逻辑。module是一个白盒;而component是一个可以独立部署的软件单元,面向的是runtime,侧重于产品的功能性。component是一个黑盒,内部的逻辑是不可见的。(用我自己的话来说就是模块是在文件层面上,对代码和资源的拆分,比如js模块,css模块。组件是在UI层面上的拆分,比如页头,页脚,评论区等) 借用大牛@张云龙的一张图,解释如下: 模块化中的模块一般指js模块,比如一个用来格式花时间的模块。 而从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,我们称之为组件。比如vue组件包含了template,style,script。它的script可以由许多js模块组成。