大白话解释web前端工程化，一文搞懂

Posted 2022-08-12 黑马程序员官方

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大白话解释web前端工程化，一文搞懂相关的知识，希望对你有一定的参考价值。

前端发展的主要话题：一开始是「特效」，后来是「用户体验」，然后是「前后端分离」，再后来是「页面性能」，然后到最近的「模块化、工程化」，到现在的「以数据为中心」。

一、给大家缕一下前端的发展史：

我只说大概，有兴趣详细了解的大家可以去查资料。

前端在最初就是为了完成网页开发，后来要同时完成5-10张甚至更多页面开发。

前端的工作内容就从简单的网页开发，拆分成模块开发，再拆分到前后端分离。过渡到可视化搭建系统等等。
职能范围从网页开发逐渐过渡到后端、全栈。
领域范围也从网页开发细分到PC端开发到移动端、游戏开发、Node.js开发以及架构师。
工程内容从最开始的时候jQuery代码就能搞定的阶段到现在需要构建、打包、集成、测试，灰度等高度工程体系化的复杂程度。

前后端分离到工程完善。Node.js和NPM生态初步建立的阶段，阿里借助node.js做前后端分离的尝试，在很多质疑当中，php最后怎么样你们也知道，基本废弃了Java的web容器。前端在node.js生态之下，也开始有了express、koa、egg、begg这样的web应用框架开源，也开始有了借助node.js完成的工程脚手架套件。

前后端的分离对前端开发的效率上没有什么太多改进，反而是前端工程体系上更加完善和健全。以前叫切图在，从前后端分离之后就不是了！因为前端的工程体系，比如IDE、研发、构建、打包、集成、测试、灰度、生产服务等等。不比后端差多少。

前端后分离阶段结束后移动端就兴起了，移动端浏览器的发展若是，赶不上APP用户体验，所以前端的工作也从PC端转向了移动端。

二、说回什么是前端工程化

前端工程化的主要目标就是解放生产力，提高生产效率，通过一系列的规范，借助工具和框架解决前端开发以及前后端协作的一些问题。

工程化表现：

一切以提高效率、降低成本、质量保障为目的的手段都是工程化。

创建：手脚架
编码：代码的规范/格式化、代码效率
预览：热更新、Mock、Source Map
代码提交：项目整体检查
代码提交：项目整体检查
部署：自动发布

工程化并不是某一个工具，工具只是实现工程化的方式，比如vue-cli；

前端工程化是把软件工程相关的方法和思想应用到前端开发中。

狭义上：将开发阶段的代码发布到生产环境，包含：构建、分支管理、自动化测试，部署

广义上：前端工程化应该包含从编码开始到发布，运行和维护阶段。

三、前端工程化的特点

前端工程化可以分成四个方面来说，分别为模块化、组件化、规范化和自动化。

模块化

模块化是指将一个文件拆分成多个相互依赖的文件，最后进行统一的打包和加载，这样能够很好的保证高效的多人协作。其中包含

JS 模块化：CommonJS、AMD、CMD 以及 ES6 Module。

CSS 模块化：Sass、Less、Stylus、BEM、CSS Modules 等。其中预处理器和 BEM 都会有的一个问题就是样式覆盖。而 CSS Modules 则是通过 JS 来管理依赖，最大化的结合了 JS 模块化和 CSS 生态，比如 Vue 中的 style scoped。

资源模块化：任何资源都能以模块的形式进行加载，目前大部分项目中的文件、CSS、图片等都能直接通过 JS 做统一的依赖关系处理。

组件化

不同于模块化，模块化是对文件、对代码和资源拆分，而组件化则是对 UI 层面的拆分。

通常，我们会需要对页面进行拆分，将其拆分成一个一个的零件，然后分别去实现这一个个零件，最后再进行组装。在我们的实际业务开发中，对于组件的拆分我们需要做不同程度的考量，其中主要包括细粒度和通用性这两块的考虑。对于业务组件，你更多需要考量的是针对你负责业务线的一个适用度，即你设计的业务组件是否成为你当前业务的 “通用” 组件。