前端工程化2（如何理解前端工程化（））前端工程化2：如何理解前端工

1、前端工程化解决的问题 1.1 为什么需要前端工程化？前端技术发展更新快，一些大型前端项目需要更系统化、更规范化的去组织开发工作；以此来提高对项目的开发效率，减少维护成本。
例如：
我们做一个电商网站（类似淘宝），它有各种商品页、活动页、详情页、列表页等。它有几个特点：

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

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

统一的开发规范 => 提高代码质量，减少维护成本
统一的文件组织结构 => 清新美观的目录结构，便于定位问题
统一的的模块依赖 => 相同依赖直接复用，不需要每次新建项目都copy
统一的工具配置 => 相同配置直接复用，发布、打包、上传等工作自动化
统一的基础代码 => 相同代码直接复用，不需要每次新建项目都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、开发阶段实践方案 【前端工程化2（如何理解前端工程化（））】例如：我们要开发一个大型的vue项目，最基本的前端开发工程化需要如下工作：
5.1. 创建项目

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

5.2 编码