这是我参与「第四届青训营 」笔记创作活动的的第1天

一句话前端工程化？

前端工程化就是遵循一定的标准和规范，通过工具去提高效率并降低成本的一种手段。

前端工程化从何说起？

早些时候前端开发就是实现页面，顶多再写写JS让页面可以有交互的效果而已。但是随着业务需求的增加，我们不仅要做Web应用，还要做App、小程序以及各种端。在这种需求日增的情况下，必须得考虑使用一种新的方式，来提升前端工程师的开发效率。例如，解决代码冗余，项目可维护性，提升版本迭代速度等等一系列的问题。前端工程化的概念也就是在这中情况下被提出了。

前端工程化解决了什么问题？

• 传统语言或语法的弊端(es6、es7等新特性；sass、less预编器等)
• 无法进行模块化/组件化开发
• 重复的机械式工作(如部署上线前需要手动压缩代码及资源文件、部署过程需要手动上传代码到服务器)
• 代码风格统一、质量保证
• 依赖后端服务接口支持(部分功能开发时需要等待后端服务接口提前完成)
• 整体依赖后端项目

实现前端工程化的前提-前后端分离？

在以前前端同学写好前端代码后会交由后端同学作为模板渲染使用（前后端未分离），这样就会出现以下问题：

• 业务耦合性强(需要开发人员既懂前端有需要懂后端)
• 指责不明确
• 开发成本高

而现在前端代码将完全与后端代码分离，很多业务前端也能自己实现（前后端分离），这样便能解决如上所述的问题，同时这也是我们进行前端工程化的一个大前提。

如何实现前端工程化？

在这之前需要了解前端工程师主要负责的内容：

• 静态资源和动态资源的处理；
• JavaScript实现前端业务逻辑；
• HTML模板文件的产出；
• 前端单元测试；
• 前端项目部署；

• 使用构建工具实现项目构建

常见构建工具Webpack、Vite、Rollup

• 使用预处理器处理源代码

JS预处理器：Babel、SWC

Css预处理器：SASS、SCSS、Less、Stylus

• 模块化开发 & 组件化开发

ESMoudle、CommonJs、Vue SFC

• 接口数据Mock

Apifox、FastMock

• 规范化约束

JS代码检查：ESLint

Css代码检查：StyleLint

代码格式化：Prettier

• 流程化部署

CI/CD