书籍-前端工程化体系设计与实践（1）

「爱情、让人受尽委屈。」 2023-10-14 17:43 3阅读 0赞

# 书籍章节 #

![在这里插入图片描述][80069760d0f1442ab03d1b08613aef53.png]

## 第一章 ##

![在这里插入图片描述][87885df108a44e66b0d603718e180773.png]

### Node.js ###

2009 年， Node.js 的问世在前端界引发了轩然大波。Node .js 将Java Script 语言带  
到了服务器端开发领域，截止到目前，业内己经有很多公司将Node.js 应用到企业级产品中。虽然Node.js 仍然没有像P田、Java 等传统服务器端语言一样普及，但由它引发的“大前端”模式己经在Web 开发领域中蔓延。  
![在这里插入图片描述][0d10d86325e54798accd038e29c1981c.png]  
数据结构、算法、软件工程等基础知识对于前端工程师同样重要，这些知识能够决定一个前端工程师的上限。  
![在这里插入图片描述][4419eeea9d624c26871be8634a607f62.png]  
如果服务器能够在文件上传完  
毕之后主动推送一条消息给浏览器的话，会节省很多浏览器和网络资源消耗。这种  
理念便是Node.js 实现异步操作的核心Event Loop （事件驱动）的雏形  
![在这里插入图片描述][9f405aa9d3fc46d484fba6b732c78a0b.png]

*  Node.js 并非一个JavaScript 框架，而是一个集成了Google V8 JavaScript 引擎、事件驱动和底层l/OAPL 并且可使用JavaScript 语言开发服务器端应用的运行环境。
 *  与PHP 不同的是， Node.js 可以直接提供网络服务，不需要借助Apache 、Nginx 等专业的服务器软件。虽然并不建议在生产环境下直接将Node .js 服务暴露给用户，但是Node.js 这种特性可以让我们更方便地开发各种工具但Node .js 的事件驱动和异步1/0 机制J 以及其易学习、易部署和对前端工程师天然的语言共通性，让其成为实时应用、微服务以及前端工程化等应用场景的最佳技术选型之一。
 *  服务端开发  
    ![在这里插入图片描述][d3bc19ca85ec4887b31a707e6194e486.png]  
    ![在这里插入图片描述][32ad1c52d1c3476d910f8b3996b7a0e7.png]  
    ![在这里插入图片描述][4da36caa72b449d783b4e88f4accf6d9.png]  
    ![在这里插入图片描述][24113f3e3c25430db10871aa35035ba4.png]

![在这里插入图片描述][89b478698be649f4b5d8c45c0535b537.png]  
![在这里插入图片描述][42637aaac805408c827376a9b049f757.png]

### 前踹工程化的3 个阶段 ###

1 .本地工具链一一工程化不等同于工具化所谓的前端工程化不  
就是把一系列工具进行整合吗？工程化的核心难道就是工具化？  
虽然我们的论述中反复提到了“工具”这个词，但工程化的核心并非工具。前端工程化是以规范工作流程为手段，以工具为实现媒介，其最终目的是为了提高研发效率以及保证Web 产品的线上质量。如果给前端工程化一个明确定义的话，较恰当的定义如下： 前端工程化是一系列工具和规范的组合，规范为蓝本，工具为实现。  
其中规范又包括：  
• 项目文件的组织结构，比如使用目录名称区分源文件和目标文件。. 源代码的开发范式，比如使用既定的模块化方案。  
• 工具的使用规范，比如工程化自身的配置规范。  
• 各阶段环境的依赖，比如部署功能的实现需要目标服务器提供S SH 权限。  
2 . 管理平台一一进一步淡化差异、加深规范  
本地工具链形态的工程化虽然解决了前端开发以及前后端协作开发中的部分痛点问题，但由于所有的功能模块均在本地环境工作，因此必然会受到环境差异性的影响，比如操作系统类型、版本、内核等。这些因素会在一定程度上影响构建产出代码的一致性。  
3 . 持续集成一一前踹工程化的目标是融入整体  
即使进化到管理平台形态，前端工程化方案所解决问题的本质仍然只是将前端工程师与服务器端工程师的工作解祸。这虽然提高了两方的工作效率，但其各自的工作流却是孤立的。前端有了构建和部署，后端也有了相应的阶段，两方的工作流是分离的，最终的融合工作仍然难以避免烦琐的人工操作。举个例子，如果需要生  
产环境版本回滚，前后端工程师分别对自己所维护的代码进行操作，井且必须保证回滚操作的同步性，这期间难以避免人工上的沟通。

### 工程化万案架构 ###

webpack  
目前市场上流行的前端工具大体分为3 类，分别介绍如下。

1.  工作流管理工具，比如G runt 、Gu lp 。
2.  构建工具，比如webpack 、rollup 。
3.  整体解决方案，比如FIS 、WeFlow 。  
    ![在这里插入图片描述][6c0fc1bd07e5419787ca0beb6c3281a1.png]  
    ![在这里插入图片描述][b0f3e2d83f99425faf90df80a3e6b013.png]  
    ![在这里插入图片描述][6f95a937f7c647c18282a6785c088eb7.png]  
    ![在这里插入图片描述][f5aa93065830490a80334c6bf04300fd.png]  
    ![在这里插入图片描述][caa370e99ad743b5a27318fe55a3d6b0.png]  
    ![在这里插入图片描述][376bfa830ded4268855a546713be3c67.png]  
    ![在这里插入图片描述][252466e5223c4fe5ad423685f0e6f315.png]  
    配置API 的设计原则着重于配置项的简洁明了，配置项可以一目了然。本书所介绍的工程化方案Boi 使用webpack 作为构建内核，在其外层封装一层简化的配置APL webpack 自身的优异性不用赘述，但是配置复杂度非常高，并且webpack 自身不提供任何具体的构建方案，用户需要自行配置并安装各种loader、plugin 来封装符合项目需求的具体方案。开发者往往需要花费大量的时间学习和处理webpack 本身的配置，这显然是非常影响开发效率的。Boi 以外部简化的配置API 映射内部高度复杂化的we bpack 配置，不仅降低了一线业务开发人员对构建工具本身的学习成本，还避免了在进行自身迭代以及问题修复过程中增加的迁移成本。  
    编程规范的设计原则着重于代码的可移植性，减少对代码的捆绑性。比如前文提到的FIS 在实现C SS Sprites 功能时需要开发者在代码中添加可被FIS 识别的特殊标记。如果项目需要迁移到其他构建方案中，这类特殊标记便成为冗余代码，不仅影响代码的可读性，而且不能保证与新的构建方案不存在冲突。工具只是辅助作用

### 总结 ###

Web 技术的发展催生用户对Web 产品产生更多、更复杂的需求，进而推动前端工程师开发任务的细化和加重。功能、逻辑、资源不断复杂化、多样化进一步促进了前端工程化的诞生。得益于Node.js 、前端工具生态的不断进步和扩大，令前端工程化方案的实施有了必要的环境条件。前端工程化的进化历程伴随着前后端工程师分工的改变而改变。前后端分离是Web 产品开发分化的必然趋势，前端工程化的核心目标之一便是建立合理的前后端分离工作环境，提高团队整体的工作效率。本地工具链形态的工程化通过Mock 服务实现了前后端并行开发，统一的工具枝加强了规范意识和约束，减少了业务开发人  
员的学习成本。云管理平台形态的工程化进一步淡化了差异性并加深了规范。

## 第2 章 ##

### 脚手架 ###

本章主要包括以下内容。  
• 探讨脚手架的功能和本质。  
• 脚手架在前端工程中的角色和特征。. 典型脚手架案例分析。  
• Yeoman 脚手架集成方案。

![在这里插入图片描述][ff6ed4edb0b74816b1e68a113bf36372.png]  
![在这里插入图片描述][9e56b8706ffb425b821d9db6b9dd9380.png]  
![在这里插入图片描述][167c841454a346e7964a3a3740e0741b.png]

### 开源脚手架案例剖析 ###

![在这里插入图片描述][8fa45ce2f0d946e79a172116bd2d5219.png]  
![在这里插入图片描述][60e91b0f26a746c499d092a735d8398c.png]  
![在这里插入图片描述][7bd79aa021f14adca91de640482cc916.png]  
![在这里插入图片描述][ce4d06a0c4cf448cacb787a1d4512d68.png]  
![在这里插入图片描述][df428c0cc4db4fd280cf6c8dc357209c.png]

[80069760d0f1442ab03d1b08613aef53.png]: https://img-blog.csdnimg.cn/80069760d0f1442ab03d1b08613aef53.png
[87885df108a44e66b0d603718e180773.png]: https://img-blog.csdnimg.cn/87885df108a44e66b0d603718e180773.png
[0d10d86325e54798accd038e29c1981c.png]: https://img-blog.csdnimg.cn/0d10d86325e54798accd038e29c1981c.png
[4419eeea9d624c26871be8634a607f62.png]: https://img-blog.csdnimg.cn/4419eeea9d624c26871be8634a607f62.png
[9f405aa9d3fc46d484fba6b732c78a0b.png]: https://img-blog.csdnimg.cn/9f405aa9d3fc46d484fba6b732c78a0b.png
[d3bc19ca85ec4887b31a707e6194e486.png]: https://img-blog.csdnimg.cn/d3bc19ca85ec4887b31a707e6194e486.png
[32ad1c52d1c3476d910f8b3996b7a0e7.png]: https://img-blog.csdnimg.cn/32ad1c52d1c3476d910f8b3996b7a0e7.png
[4da36caa72b449d783b4e88f4accf6d9.png]: https://img-blog.csdnimg.cn/4da36caa72b449d783b4e88f4accf6d9.png
[24113f3e3c25430db10871aa35035ba4.png]: https://img-blog.csdnimg.cn/24113f3e3c25430db10871aa35035ba4.png
[89b478698be649f4b5d8c45c0535b537.png]: https://img-blog.csdnimg.cn/89b478698be649f4b5d8c45c0535b537.png
[42637aaac805408c827376a9b049f757.png]: https://img-blog.csdnimg.cn/42637aaac805408c827376a9b049f757.png
[6c0fc1bd07e5419787ca0beb6c3281a1.png]: https://img-blog.csdnimg.cn/6c0fc1bd07e5419787ca0beb6c3281a1.png
[b0f3e2d83f99425faf90df80a3e6b013.png]: https://img-blog.csdnimg.cn/b0f3e2d83f99425faf90df80a3e6b013.png
[6f95a937f7c647c18282a6785c088eb7.png]: https://img-blog.csdnimg.cn/6f95a937f7c647c18282a6785c088eb7.png
[f5aa93065830490a80334c6bf04300fd.png]: https://img-blog.csdnimg.cn/f5aa93065830490a80334c6bf04300fd.png
[caa370e99ad743b5a27318fe55a3d6b0.png]: https://img-blog.csdnimg.cn/caa370e99ad743b5a27318fe55a3d6b0.png
[376bfa830ded4268855a546713be3c67.png]: https://img-blog.csdnimg.cn/376bfa830ded4268855a546713be3c67.png
[252466e5223c4fe5ad423685f0e6f315.png]: https://img-blog.csdnimg.cn/252466e5223c4fe5ad423685f0e6f315.png
[ff6ed4edb0b74816b1e68a113bf36372.png]: https://img-blog.csdnimg.cn/ff6ed4edb0b74816b1e68a113bf36372.png
[9e56b8706ffb425b821d9db6b9dd9380.png]: https://img-blog.csdnimg.cn/9e56b8706ffb425b821d9db6b9dd9380.png
[167c841454a346e7964a3a3740e0741b.png]: https://img-blog.csdnimg.cn/167c841454a346e7964a3a3740e0741b.png
[8fa45ce2f0d946e79a172116bd2d5219.png]: https://img-blog.csdnimg.cn/8fa45ce2f0d946e79a172116bd2d5219.png
[60e91b0f26a746c499d092a735d8398c.png]: https://img-blog.csdnimg.cn/60e91b0f26a746c499d092a735d8398c.png
[7bd79aa021f14adca91de640482cc916.png]: https://img-blog.csdnimg.cn/7bd79aa021f14adca91de640482cc916.png
[ce4d06a0c4cf448cacb787a1d4512d68.png]: https://img-blog.csdnimg.cn/ce4d06a0c4cf448cacb787a1d4512d68.png
[df428c0cc4db4fd280cf6c8dc357209c.png]: https://img-blog.csdnimg.cn/df428c0cc4db4fd280cf6c8dc357209c.png