前端工程化的理解

很久没写过博客沉淀下，最近看了几篇前端工程化的文章，结合自己实践所学，阐述下什么是前端工程化。

大前端其实分为很多种

移动应用开发的前端
web前端

本篇主要是说下web前端的工程化

什么是前端工程化

在回答前端工程化这个问题之前，我们应该先考虑另外一个问题：前端开发中会不会涉及到业务？再详细一点，就是前端工程师到底需不需要了解服务端的业务逻辑，再或者说，要不要将一部分服务端的业务逻辑放到前端来实现。这个问题没有标准的答案，实际上应该属于工程协作问题，就是谁该干什么的问题。

最早的前端开发就是实现页面，顶多再写写JS让页面可以有交互的特效。属于前后端未分离的时代。

但是随着需求的增加，我们不仅要做Web应用，还要做App、小程序以及各种端。前后端分离的时代开始，在这种需求日增的情况下，必须得考虑一种新的方式，优化前端的开发工作，例如，解决代码冗余，项目可维护性，提升版本迭代速度等等一系列的问题。前端工程化的概念也就是在这中情况下被提出了。

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

工程化变表现

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

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

注意，工程化不是某个工具，工具化只是实现工程化的方式，如vue-cli。node对前端工程化起了非常大的作用

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

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

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

也有人把 前端工程化 等同于 效率工程

认为一切能提升前端开发效率、提高前端应用质量的方法和工具都是前端工程化，我觉得这么理解也是没有问题的，提升开发效率、提升产品质量、降低开发难度、降低企业成本应该是工程化的意义所在。

前端工程化的特点

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

模块化

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

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 层面的拆分。

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