前端工程化的基本介绍-易微帮

一、概念

工程化，可以理解为使用一些方式，去改良提高行业中现有的步骤、设计、应用方式。前端工程化，就是指对前端进行一些流程的标准化，让开发变得更有效率，且更好地做产品交付。
一开始，网页页面并不复杂，只是提供一些简单的展示和交互的静态页面，甚至不需要后端。
后来需要根据不同用户返回不同的页面信息，此时我们会用后端读取数据，配合一些模板引擎，在后端拼接好内容再返回，这就是所谓的服务端渲染（SSR）。
再后来，页面变得非常复杂，于是出现了前后端分离，前端被单独拎了出来，专门写 html、css 和 js，变成了单页面应用（SPA）。但复杂也带来了很多问题，比如多个脚本的执行时机不对、css 名冲突、文件过于臃肿、错误的缓存导致没能下载最新的资源，等前端复杂后出现的一系列问题。
随着 Nodejs 的诞生，我们可以用 JS 去写前端工具了。为了解决上面这些问题，前端界出现了一大堆的工具和框架：Gulp、Angular、babel、Sass、React、Vue、Webpack、Yarn、TypeScript、ESLint、Docker、k8s 等等。
一切都是为了让前端的开发更工程化，也就是不停地改良前端项目的开发流程，让开发者能够更高效地开发、更好地进行团队协作、让代码的风格标准化、对资源做压缩以及懒加载、更好地交付部署等

1.1 JS 的模块化。

JS 一开始的职责是给网页提供一些简单的交互，所以语法相对简单且不支持模块化。随着网页的复杂，发现原来的组织方式带来了很多问题，变得难以维护。
于是 CommonJS、AMD、ES Module 等模块系统出现了。正统标准是 ES Module，通过 import 关键字引入模块，通过 export 导出模块。
JS 的模块化将代码做了拆分，解决了全局变量污染、依赖关系不清晰、多人协作不方便、脚本引入顺序、单元测试等问题。

1.2 CSS 的模块化

CSS 的第一个问题是比较难写，比如不支持选择器嵌套，对此我们可以用 CSS 预编译器（比如 Less、Sass、Stylus）去写一些更高级的语法，然后编译成 CSS。
然后是就命名冲突问题，一种旧的方案是 BEM，就是通过将 CSS 命名在组件化的框架中，我们有很多方案，可以用 CSS in JS，也可以用 CSS Module，或者 Vue 特有的 CSS Scoped。

1.3 HTML 的模块化

html 通常是动态的，在服务端我们会使用模板引擎（template），将得到的数据注入到占位符中。在后端 Nodejs，我们可以用 pug、handlebars、ejs 等。
前后端分离后，我们通常使用的是 Vue 的 template（类似 handlebars 语法）以及 React 的 JSX。

1.4 资源整合模块化

不同类型的资源无法组织在一起，比如 JS 引擎能识别引入的 js 文件，但无法识别 css 文件。如果我们希望所有的资源都能组织再一起进行管理，要分别管理一个个不同类型的资源要方便地多。
为了解决这个问题，webpack 诞生了。webpack 是一个模块打包器，能够将任何资源转换为 js 代码进行导入。比如图片，它可以先变成一个静态资源服务的一个资源，然后在 js 文件 import 的时候在转换为一个 url 字符串，或者直接就变成一个 base64 字符串。
这些需要使用到一些 loader（加载器）。webpack 是一个框架，使用者需要根据需求，添加一些 loader，去识别不同的文件，转化成 JS 代码导入。
此外还有 plugin（插件），在这整个流程中做一些处理，比如将导出的 JS 文件插入到 HTML 模板中，或是进行代码的压缩等等

组件化是 UI 层面上的更细粒度的拆分，一种类似 div 等原生元素的 “自定义元素”。
组件有自己的 HTML、CSS 和 JS，同时有自己的状态，并支持嵌入到其他组件中并接受外部的数据，可以进行复用。组件化可以看作是 UI 层组织方式的一种模块化。
目前主流的 React 和 Vue 前端框架都是基于组件的。
原本的以资源类型为单位进行组织的管理（所有 JS 文件放一个文件夹、CSS 同理），其实维护起来比较困难，也不好复用，组件化的构想是以视觉为单位进行拆分，做了结构、样式、脚本的组装，抽象出一个 “新的元素”。
组件已经是前端开发的基石了，是一种比较合理的抽象。