前端工程化

1. 小白眼中的前端开发 vs 实际的前端开发

小白眼中的前端开发：

• 会写 HTML + CSS + JavaScript 就会前端开发

• 需要美化页面样式，就拽一个 bootstrap 过来

• 需要操作 DOM 或发起 Ajax 请求，再拽一个 jQuery 过来

• 需要渲染模板结构，就用 art-template 等模板引擎

实际的前端开发：

• 模块化（js 的模块化、css 的模块化、其它资源的模块化）

• 组件化（复用现有的 UI 结构、样式、行为）

• 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）

• 自动化（自动化构建、自动部署、自动化测试）

2. 什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、

标准化。最终落实到细节上，就是实现前端的“4 个现代化”：

模块化、组件化、规范化、自动化

3. 前端工程化的好处

前端工程化的好处主要体现在如下两方面：

① 前端工程化让前端开发能够“自成体系”，覆盖了前端项目从创建到部署的方方面面

② 最大程度地提高了前端的开发效率，降低了技术选型、前后端联调等带来的协调沟通成本

4. 前端工程化的解决方案

早期的前端工程化解决方案：

• grunt（ Grunt: JavaScript 世界的构建工具 | Grunt 中文网 ）

• gulp（ gulp.js - 基于流(stream)的自动化构建工具 | gulp.js 中文网 ）

目前主流的前端工程化解决方案：

• webpack（ webpack 中文文档 | webpack 中文网 ）

• parcel（ Parcel 中文网 ）