小磊哥er的大前端学习笔记

Appearance

《前端工程化：体系设计与实践》精读笔记 ​

写在前面 ​

  • 书籍介绍：前端工程化包含一系列规范和流程，其可提升前端工程师的工作效率，加快Web开发迭代速度，是现在前端开发领域中非常重要的一环。这本书系统、全面地介绍了前端工程体系的各个环节，包括设计要点和实践经验。
  • 我的简评：前端工程化本身是个大话题，涉及的内容很多。但感觉这本书讲得有点简略，好多只是提提而已，不过对于全面了解和实践前端工程化还是有点帮助的。
  • ！！福利：文末有pdf书籍、笔记思维导图、随书代码打包下载地址哦

第一章 前端工程简史 ​

  • 1.1.前端工程师的基本素养：1. 从最初的重交互/UI，轻 JavaScript 的开发模式，到交互、UI、逻辑一把抓，再到“大前端”的服务器端、客户端全掌控，前端工程师的工作内容和工作职责不断扩宽；2. 前端工程师的技能栈：硬技能（HTML/CSS/JavaScript）、软技能（用户体验）、 扩展技能：Node.js）
  • 1.2.Node.js 带给前端的改革：1. 第一次新生：AJAX。AJAX 技术可以实现异步请求和局部刷新，彻底改变了传统 Web 站点的交互模式；2. 第二次新生：Node.js。让JavaScript进入了服务器端开发领域，更重要的意义是丰富了 JavaScript 的生态；3. Node.js并非一个JavaScript框架，而是一个集成了Google V8 JavaScript引擎、事件驱动和底层I/O API，并且可使用JavaScript语言开发服务器端应用的运行环境；4. 服务器端开发、同构JavaScript、前端工具
  • 1.3.前后端分离：1. 所谓前后端分离指的是通过将前端工程师与后端工程师进行明确、合理的分工，改善前后端协作中拖慢开发进度的环节，提高工作效率；2. 从开发角度来讲，前后端分离的宗旨是实现并行开发，缩短开发周期；3. 从测试角度来讲，前后端分离令前端工程师和后端工程师更快速、精准地对问题进行定位；4. 从部署角度来讲，前后端分离将静态文件和动态文件分离部署并结合回滚策略，简化了部署流程，增强了应用程序的健壮性。
  • 1.4.前端工程化：1. 前端工程化的主要目标是解放生产力、提高生产效率；2. 具体的衡量标准就是我们常说的3个字：快、准、稳；3. 进化历程：混沌形态（前端写demo，后端写逻辑、套模板）、前后端分离形态（前端逻辑、样式和HTML全部交由前端工程师开发）；4. 3个阶段：本地工具链——工程化不等同于工具化、管理平台——进一步淡化差异、加深规范、管理平台——进一步淡化差异、加深规范
  • 1.5.工程化方案架构：1. 流行的前端工具（1. 工作流管理工具，比如Grunt、Gulp；2. 构建工具，比如webpack、rollup；3. 整体解决方案，比如FIS、WeFlow）；2. 整体架构：1. 本地工具链和云管理平台形态的前端工程化方案的主要区别在于，将构建、部署功能提升到云平台集中管理，保证构建结果的一致性并且便于权限控制，而从各个功能模块的实现角度考虑并没有很大差别；2. 系统层：Node.js；内核层：Yeoman、Webpack、Express、SSH；平台层：脚手架、本地服务器、构建、部署；用户层：命令行终端、配置API；3. 功能规划（1. 以Yeoman为内核的脚手架；2. 以Express承载的本地服务器；3. 以webpack为内核的构建系统；4. 基于SFTP协议的远程部署功能）；4. 设计原则（1. 规范设计原则——用户至上；2. 架构设计原则——扩展至上）

第二章 脚手架 ​

  • 2.1.脚手架的功能和本质：1. 脚手架的功能是创建项目初始文件，本质是方案的封装
  • 2.2.脚手架在前端工程中的角色和特征：1. 用完即弃的发起者角色；2. 局限于本地的执行环境；3. 多样性的实现模式
  • 2.3.开源脚手架案例剖析：1. Sails.js——Node.js全栈MVC框架；2. Yeoman——开放的脚手架平台
  • 2.4.集成Yeoman封装脚手架方案：1. 封装脚手架方案：收集用户配置；转化动态内容；自动安装依赖模块；2. 集成到工程化体系中：Yeoman Node.js API；实现集成
  • 2.5. 脚手架是一个单独衡量并没有很大价值，但却是整体前端工程体系中不可或缺的功能模块。

第三章 构建 ​

  • 3.1.构建功能解决的问题：1. 目前我们所熟知的Grunt、Gulp、webpack等工具均是由Node.js为底层驱动平台的；2. 构建，或者叫作编译，在前端工程体系中的角色是将源代码转化为宿主浏览器可执行的代码，其核心是资源的管理；3. 构建工作的核心便是将其转化为宿主可执行代码；4. 构建还需要包括以下功能：依赖打包、资源嵌入、文件压缩、hash指纹；5. 构建需要解决的问题可以归纳为以下3类：面向语言、面向优化、面向部署
  • 3.2.配置API设计原则和编程范式约束：1. 前端工程化方案Boi是一个上层框架，内核层集成了Yeoman、webpack、Express等基础模块
  • 3.3.ECMAScript与Babel：1. 熟知的ECMA-262标准；2. Babel的作用简单概括就是将浏览器未实现的ECMAScript规范语法转化为可运行的低版本语法
  • 3.4.CSS预编译与PostCSS：1. CSS缺陷：受限于浏览器的实现以及CSS自身的弱编程能力；2. CSS 预编译器的工作原理是提供便捷的语法和特性供开发者编写源代码，随后经过专门的编译工具将源码转化为CSS语法；3. PostCSS并不是另一种CSS预编译器，与SASS、LESS等预编译器也并不冲突；4. 目前普遍的方案是将CSS预编译与PostCSS综合在一起
  • 3.5.模块化开发：1. 组件（component）和模块（module）是两个不同的概念；2. 应用于生产环境的模块化构建系统还需要兼顾性能优化；3. 模块化开发的价值：避免命名冲突；便于依赖管理；利于性能优化；提高可维护性；利于代码复用；4. CommonJS是一种只适用于JavaScript的静态模块化规范，适合Node.js开发，但是并不适合浏览器环境；5. AMD/CMD 规范重点解决了浏览器对前端模块化的需求；6. webpack支持CommonJS、AMD和ES6 Module模块化规范
  • 3.6.增量更新与缓存：1. 客户端的缓存两种：本地存储、HTTP缓存策略；2. 覆盖更新与增量更新都是建立在启用浏览器强制缓存策略的前提下；3. 按需加载与多模块架构场景下的增量更新；4. webpack 本身具备计算 hash 的功能，配置项有两个：hash和chunkhash
  • 3.7.资源定位：1. 原始Web项目普遍的部署方式是将JS、CSS、图片等静态资源与服务器端代码部署在相同的路径；2. CDN一种部署策略，包括分布式存储、负载均衡、内容管理等模块；3. webpack的逆向注入模式

第四章 本地开发服务器 ​

  • 4.1.本地开发服务器解决的问题：1. 动态构建存在的必要性是为了方便前端工程师在开发期间进行即时的调试；2. 前后端开发人员在正式进入开发之前协商好数据接口的规范
  • 4.2.动态构建：1. webpack-dev-server 是官方提供的用于搭建本地开发环境的一个微型 Node.js 服务框架，并且提供动态编译、HMR（热更新）等功能；2. webpack-dev-middleware将webpack构建输出的文件存储在内存中；3. 实现监听和触发动态编译功能需要从webpack-dev-middleware的配置入手；4. Livereload的原理是在浏览器和服务器之间创建WebSocket连接，服务器端在执行完动态编译之后发送reload事件至浏览器，浏览器接收到此事件之后刷新整个页面；5. LiveLoad一个致命的缺陷：无法保存页面状态；6. HMR与Livereload的实现方式类似的是，两者之间也是通过WebSocket进行通信的
  • 4.3.Mock服务：1. 在正式进入开发阶段之前，前后端开发人员需要协定接口的规范细节，包括请求方法、入参、返回值等2. 1、假数据；2、客户端Mock；3、Mock Server；3. Mock Server还需要兼顾SSR的场景

第五章 部署 ​

  • 5.1.部署流程的设计原则：1. 速度——化繁为简；2. 协作——代码审查和部署队列；3. 安全——严格审查和权限控制
  • 5.2.流程之外：前端静态资源的部署策略：1. 协商缓存与强制缓存

第六章 工作流 ​

  • 前端工程体系中各个功能模块的工作涉及两个要素：执行人和执行环境
  • 6.1.本地工作流：1. 测试沙箱的原则是搭建一个仿真的生产环境
  • 6.2.云平台工作流：1. 将容易因个体差异产生问题的功能模块（比如构建、部署等）提升至云平台运行，通过严谨的流程控制增强开发的规范性；2. 自动构建最常用的方案是与Git管理平台（如GitLab）联动，由WebHook机制触发，然后构建结果通过单元测试之后触发自动部署；3. WebHook 是一种用于在服务器之间进行实时通信的策略，源服务器通过监听某种特定事件（比如Git仓库的Push事件），在事件发生后发送一个HTTP请求（通常是POST请求）至目标服务器；4. WebHook 通常被用于实时性要求较高的场景，比如消息通知
  • 6.3.持续集成与持续交付：1. 持续集成、持续交付以及持续部署是目前软件开发领域被广泛探索和实践的自动化模式；2. 前后端工程化汇总过程实现持续化一个必不可少的条件是版本的统筹管理

第七章 前端工程化的未来 ​

  • 7.1.前端工程师未来的定位：1. 不只是浏览器；2. 也不只是Web
  • 7.2.前端工程化是一张蓝图：1. 前端工程体系是一种服务，以项目迭代过程中的前端开发为主要服务对象，涉及开发、构建、部署等环节；2. “大前端”模式、“泛前端”模式

写在后面 ​