前端工程化是使用软件工程的技术和方法来对前端项目的开发、测试、上线和维护进行管理的方法。前端工程化的目的是为了提升开发效率，提高产品质量。主要包括以下几个方面：

模块化

前端模块化是指前端项目中包括 Javascript、CSS、HTML 和图片、字体、文本、声音等各种资源文件的编译、拆分、合并和引用的过程。

js 模块化 & 编译

在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案，如 CommonJS 、 AMD 和 CMD 等。
现在ES6已经在语言层面上规定了模块系统，完全可以取代现有的 CommonJS 和 AMD 规范，而且使用起来相当简洁，并且有静态加载的特性。
但是目前浏览器还没有完全支持这种规范，所以，要实现 ES6 Module 规范的话，还需要使用编译工具进行编译。我们可以使用 Babel(Javascript编译器) 对JS源码进行编译，将ES6特性编译为浏览器支持的语法，这样我们就可以在JS源码中使用ES6的新特性包括模块化编程。

css 模块化 & 预编译

CSS预编译器的工作原理是提供便捷的语法和特性供开发者编写源代码，随后经过专门的编译工具将源码转化为CSS语法。目前流行的CSS预编译器有 SASS 、LESS、 Stylus。

css模块化 有三种解决方案包括 Shadow DOM、CSS in JS、CSS Modules

Shadow DOM 是 Web components 的标准。它能解决全局污染问题，但目前很多浏览器不兼容，对我们来说还很久远；
CSS in JS 是彻底抛弃CSS，使用JS或JSON来写样式。这种方法很激进，不能利用现有的CSS技术，而且处理伪类等问题比较困难；
CSS Modules 仍然使用CSS，只是让JS来管理依赖。它能够最大化地结合CSS生态和JS模块化能力，目前来看是比较好的解决方案。Vue的scoped style就是一种CSS Modules 方案。

HTML 模板

HTML模板技术是为了将数据和模板结合可以动态的生成HTML页面。常用的模板引擎有 Jade、EJS、Mustache、Handlebars、JSHTML、Smarty（PHP）。

资源模块化

web应用中不仅仅需要考虑 js/css资源，还需要考虑诸如文本，图片，字体等资源的管理。

组件化

前端组件化是指从设计层面上对用户界面的拆分。从UI中拆分出来的一个结构单元，称为UI组件，一个UI组件单元包含了HTML模板、CSS样式、JS逻辑。组件是可以嵌套的，一个页面可以拆分成若干个大组件，大组件可以拆分成中型组件，中型组件可以拆分成小组件，直到拆分成DOM元素。组件的拆分是为了复用，一个组件应该包含完整的功能，可以在多个页面中复用，或者被多个更大型的组件复用。

目前比较流行的js框架都有组件库，例如 Vue 有 Element-ui、iview、Vuetify、Vue Material 等，React 有 Ant Design、Material-UI、React-Bootstrap、React toolbox、React Belle、React Grommet、Ant Design React

规范化

前端规范化是指在前端项目进行过程中制定各种项目规范与标准。这又包括以下几个部分：

编码规范

通常包括 JS编码规范、CSS编码规范、HTML编码规范。

JS编码规范 通常使用代码检查工具来进行代码格式检查，知名代码格式检查工具包括 JSlint、JSHint、ESLint 等，其中 ESLint 目前较为流行，目前基于 ESLint 的知名的代码规范有 Standard Style Guide、Airbnb JavaScript Style Guide、Google Style Guide。

CSS编码规范 有代码检查工具 stylelint 。为了保持同一个项目中的CSS代码复用和样式统一的问题，有些项目也会使用特殊的CSS编码规范，例如 BEM、OOCSS、SMACSS

HTML编码规范 规则较少，主要集中于使用语义化标签和HTML标签属性和值的使用习惯。

其他规范

除了编码规范外的其他规范。

字体规范 主要体现在字体文件使用的一致性上。

图片规范 主要体现在图片的质量、图片引入方式、图片类型、图片合并、图片CDN的规范和约束上。

命名规范&文件目录规范 主要体现在项目的资源命名、目录结构应该合理、清晰、可扩展。

接口规范 主要体现在前后端分离情况下，对联合调试时接口的认同上应符合一定的规范来避免责任不清的问题。接口规范一般应包括对以下内容的解释与样例，包括接口请求类型、接口请求地址、接口请求参数名、请求参数类型、请求参数是否必填、请求参数取值范围、请求参数样例、请求参数备注、请求返回结构（包括返回参数名&类型&是否必填&取值范围&样例&备注）、请求返回错误码映射等。目前有多种接口工具用来约束接口规范，包括 Yapi、swagger、PostMan 等，这些工具一般还提供接口Mock甚至接口规范权限管理的功能，方便对接口进行调试和管理。

文档规范 主要体现在对项目开发、调试、检查、测试、上线、运维的说明文档的书写规范。目前较常用的文档均使用 Markdown 进行书写，或在 Markdown 的基础上进行进一步的扩展。

代码管理规范（git规范） 通常指代码管理流程中的一系列标准化问题。目前主要的代码管理工具有 SVN 和 Git，Git由于对分布式开发的友好基本上占据了绝大部分的市场分割。所以目前的代码管理规范主要包括 git工作流 & branch命名管理 和 commit管理。

自动化

前端自动化是指在项目进行过程中的自动化构建、自动化测试、持续集成和线上监控的部分。

自动化构建

自动化构建是将源代码利用工具自动转换成用户可以使用的目标的过程。常用的前端项目构建工具包括 webpack、gulp、grunt、rollup、browserify、fis 等。

自动化测试

自动化测试是指测试的自动化，一般包括单元测试、集成测试和端到端测试的自动化。

单元测试(UT)

单元测试是指对程序中最小可测试单元进行的测试。
Karma：Karma为前端自动化测试提供了跨浏览器测试的能力，可以在浏览器中执行测试用例
还有一些知名单元测试框架：Jasmine、Mocha、Jest、AVA、Tape
测试一般包含多个部分，除了基础测试框架，还可包括 数据模拟 Mock、测试运行环境配置、断言库、覆盖率统计，部分测试框架只是提供了基础测试框架并没有进行集成。
一些知名的测试周边:should.js、expect.js、chai.js、sinon.js、istanbul
关于他们之间的异同，可以查看 https://juejin.cn/post/6844903589488361486

集成测试

在单元测试的基础上，将所有模块按照设计要求（如根据结构图）组装成为子系统或系统，进行的测试称为集成测试。

端到端测试(E2E)

前端的端到端测试是指从用户角度来测试web应用质量。
端到端测试需要web容器来运行用例，例如 Chromium, Electron, PhantomJS, WebDriver。

知名端到端测试框架有：Puppeteer、Nightmare、Nightwatch、Cypress

持续集成（CI）

持续集成(CI)是一种软件开发实践，它基于将代码频繁集成到共享代码仓中。 然后通过自动构建(automated build)验证每个签入(Check-In)。
常用的持续集成工具有 travis、jenkins。

线上监控

前端项目上线后，需要对线上情况进行监控，统计前端代码错误（包括错误堆栈信息、用户环境等）、记录用户行为、统计网站性能数据等。
Google Anaytics、 百度统计都可以对用户行为进行记录。而 Sentry 可以进行异常捕获与分析。