前端工程化2：如何理解前端工程化？

1、前端工程化解决的问题

1.1 为什么需要前端工程化？

前端技术发展更新快，一些大型前端项目需要更系统化、更规范化的去组织开发工作；以此来提高对项目的开发效率，减少维护成本。

例如：

我们做一个电商网站（类似淘宝），它有各种商品页、活动页、详情页、列表页等。它有几个特点：

1. 每个页面功能高度类似，但还是有一些差别；
   
2. 它们之间有很多公共依赖；也有一些公共的接口；
   
3. 每个页面都作为一个独立的项目由不同的团队或者个人开发。
   

这时候为了避免混乱和提升开发效率，就需要有：

1. 统一的开发规范 => 提高代码质量，减少维护成本
2. 统一的文件组织结构 => 清新美观的目录结构，便于定位问题
3. 统一的的模块依赖 => 相同依赖直接复用，不需要每次新建项目都copy
4. 统一的工具配置 => 相同配置直接复用，发布、打包、上传等工作自动化
5. 统一的基础代码 => 相同代码直接复用，不需要每次新建项目都copy

1.2 前端工程化解决的问题：

传统的前端开发方式存在一些问题，为了提升整体开发效率并降低代码维护成本；我们需要实现前端开发工程化，它能解决如下问题：

1、 传统语言和语法在各端的兼容性不好；

例如，现在的项目通常都是用es6+或者ts去开发；而一些政企项目中客户（特别是国企的客户）还在用一些老电脑，使用的IE8、IE9、IE10等老的浏览器版本不兼容es6+的执行，需要转换为es5甚至es3到浏览器去执行；

2、 一些项目无法使用模块化/组件化；

例如，以前做的一个数据可视化项目中有大量图表组件；这些图表组件的代码量和数量很多，全部一次加载浏览器速度很慢。所以需要考虑图表组件的按需加载，那就需要webpack这样的工具来配合做图表的模块化和组件化。

3、 重复机械式的工作/重复造轮子；

工程化时，我们可以将重复代码提取成公用的模块或者库供所有人使用，避免重复造轮子；

4、 没有代码风格统一、质量保证

在开发中如果没有统一的代码书写规范，那么会造成项目开发的混乱，会在项目中遗留很多隐性的BUG，也会导致后期项目维护成本升高。所以我们通常使用eslint、csslint等工具来检查代码书写规范。

5、 前后端分离开发过程中，依赖后端服务支持导致效率低下

现在的项目开发中，为了提升效率和项目解耦通常采用了前后端分离的方式；但是前端开发和后端开发是同时进行，大概率情况下前端所需后端接口不能及时提供；所以我们需要使用mock等工具自己去模拟接口。

2、前端工程化流程

创建项目 => 编码 => 预览/测试 => 提交 => 部署

2.1 创建项目

在项目开发初期，我们可以实用工具自动创建一些脚手架、模板、通用等文件；还能够创建项目结构、创建特定类型文件，例如：

• 创建vue项目：vue-cli
• 创建react项目：create-react-app
• 自定义nodejs cli应用：根据自己需求实现的工具，可以自定义创建项目、生成项目描述文件等。

2.2 编码

在正式堆代码的时候，可能会有多人协同开发的场景；这时候需要我们制定编码规范来约束开发人员的编码风格，并使用工具来代替人为约定。除此之外，还可以使用一些自动化工具来替我们自动构建、自动编译打包。

• 格式化代码：prettier
• 校验代码风格：eslint、stylelint
• 编译/构建/打包/模块化：grunt、gulp、fis3、webpack、babel

2.3 预览/测试

在开发本地调试的时候，我们可以使用一些工具来模拟服务器场景并实现热更新、热加载；即代码修改后自动编译构建，浏览器根据变化自动刷新同时还要方便我们查看源码。

• 本地服务：WebServer / Mock
• 热加载/热更新：Live Reloading / HMR
• 源码映射：Source Map

2.4 提交

• Git Hooks：可在提交前进行代码质量和风格的检查
• Lint-staged
• 持续集成

2.5 部署

• 自动化部署：CI/CD
• 自动化集成：Jenkins 可以调用执行脚本，集成自动化构建、打包、部署等

3、常用的通用脚手架工具

vue-cli —— 创建vue项目的工具
create-react-app —— 创建react项目的工具
Yeoman —— 用于创建自定义脚手架的工具
Plop —— 用于项目中，重复创建相同类型的项目文件（例如vue中某个组件的js、css文件）

4、常用的自动化构建工具

Grunt

• 插件完善
• 构建速度慢（每一步都有临时文件读写，步骤越多）

Gulp

• 插件完善
• 构建速度更快（没有临时文件，基于内存实现）
• 默认支持多个任务同时执行
• 使用方式更直观易懂

Fis

• 百度开源项目
• 大而全的构建工具，集成度高一些

Webpack

• 准确说是模块打包工具，也可以完成自动化构建的功能

5、开发阶段实践方案

例如：我们要开发一个大型的vue项目，最基本的前端开发工程化需要如下工作：

5.1. 创建项目

1. 自定义一个nodejs cli应用并发布到npm上（方法见后续文章）
2. 使用nodejs cli应用创建一个项目，会生成源码目录结构、模板文件、公用文件、构建工具配置等，例如：package.json、webpack.config.js、eslint.lrc等
3. 使用nodejs cli应用自动调用npm install等工作（可选）

5.2 编码

1. 使用webpack进行构建，通过插件babel转换es6+、sass/less、vue模板代码等
2. 使用webpack配合ES Modules/CommJS规范进行模块化开发
3. 使用eslint、stylelint进行代码规范检查
4. 使用prettier进行代码格式化

5.3 预览/测试

1. 使用browser-sync、webpack-dev-server作为本地web服务，并进行热更新热加载
2. 使用webpack配置的source map来调试源码
3. 使用webpack配置的proxy、Nginx代理来解决跨域问题
4. 使用mock模拟web服务器的http接口

5.4 提交

1. 使用git + github做代码管理（其它gitee或者自己搭的仓库也可）
2. 结合npm scripts、git hooks、lint-staged在提交代码前进行代码规范检查

5.5 部署

1. 使用Jinkens调用命令行进行webpack打包，然后执行一系列后续操作
2. 然后配合其它的工具可自动发布到我们需要的系统上去（根据公司需求可自定义）

特别鸣谢：拉勾教育前端高薪训练营