# 前端工程化
# 概述
前端工程化主要解决的问题：
- 传统语言或语法的弊端(
ES6、TypeScript、SCSS/LESS) - 无法使用模块化/组件化(
ES Modules、Components) - 重复的机械式工作(
Build、Publish) - 代码风格统一、质量保证(
git、ESLint) - 依赖后端服务接口支持(
Mock) - 整体依赖后端项目(
DevServer)
# 前端构建
鉴于模块化，ES6、LESS等前端新技术的发展，当前的前端源代码必须经过构建之后，才能进行部署。
前端的构建，主要是指将源代码转换成可执行的JavaScript、CSS、HTML代码，主要包括以下内容：
- 代码转换，将
TypeScript或者ES6转换成ES5，将SCSS或LESS转成CSS - 文件优化，压缩
JavaScript、CSS、HTML代码，压缩合并图片 - 代码分割，提取多个页面的公共代码，提取首屏不要执行的代码让其异步加载
- 模块合并，将多个模块和文件分类合并成一个文件
- 自动刷新，监听本地源代码的变化，自动重新构建、刷新浏览器
- 代码校验，在代码被提交到仓库之前校验代码是否符合规范，以及单元测试是否通过
- 自动发布，更新代码后，自动构建出线上发布代码并传输给发布系统
大部分的前端构建工具基本上都是基于Node.js开发，常见的有：
| 构建工具 | 简介 |
|---|---|
Npm Script | Npm内置功能，通过在package.json的scripts字段定义任务实现 |
Grunt | 与Npm Script类似的任务执行者，配置驱动，基于插件封装各种常见任务。集成度不高，任务非常多难以维护，资源文件较多时存在I/O性能问题 |
Gulp | 基于流的自动化构建工具，除了管理和执行任务，还支持监听文件、读写文件 设计简洁，只需要通过 gulp.task注册任务、gulp.run执行任务、gulp.watch监听文件、gulp.src读取文件、gulp.dest写文件代码驱动，写任务就和写普通的 Node.js代码一样；好用又灵活，即可单独构建又可以和其他工具搭配使用对文件读取是流式操作（ Stream），一次I/O可以处理多个任务 |
Webpack | 前端资源模块化管理和打包工具。一切皆模块，可以清晰的处理各模块之前的依赖关系。灵活可配置，基于Loader和Plugin的扩展机制。可以实现按需加载。 |
Rollup | 类似于Webpack的JavaScript模块打包器，首先引入了Tree Shaking和Scope Hoisting以减小文件大小和提升运行性能。不支持Code Spliting，更适用于打包JavaScript库 |
webpack →