前端工具链的形成是前端发展的一个体现，从开始的html、css、js三剑客就可以搞定一个项目，到现在各类工具百花齐放协助开发，越发庞大的前端项目，越是需要一套完整的开发管理流程，前端工程化被提出来。工程化下工具链也就产生了 现在的项目都有着一些通用的需求：

1. 代码类型管理
2. 代码风格管理
3. 代码依赖管理
4. 代码热更新、预编译
5. 项目统一的构建打包
6. 项目产物的压缩混淆

对应的产生了一系列解决方法

1. 静态类型语言 - typescript
   问题：javascript令人喜欢的点在于它的灵活，弱类型等，但是在大型项目，多人协作情况下，类型的不统一，随意修改，导致错误的发生。

2. 代码风格检查 - eslint
   问题：多人协作下，每个人编码风格不统一，如空格与tab，维护扩展时带来编码问题，git修改历史问题。

3. 依赖管理 - npm、yarn
   问题：海量的第三方库引用需要有合适的包管理工具。
   关键点：npm 与 yarn的区别，功能上能相互替代，yarn采用并行下载依赖，npm串行下载。

4. 代码转译 - babel
   问题：需要兼容低版本浏览器。

5. 协助开发 - live reload 、HMR（Hot Module Replacement ）
   问题：代码修改后需要手动刷新页面。代码修改后更改需要刷新后才能应用上。

6. 打包压缩 - wabpack、rollup
   问题：使用框架或者第三方库编写的代码过大，文件过多需要打包到一起加载。

7. 重复任务管理 - gulp、webpcke、npm script
   问题：需要对项目内的重复任务进行执行。
   关键点：gulp通过编写文件，组合多任务，gulp 任务名即可。webpack拥有海量插件进行一系列操作。npm scripts则是在package.json的scripts中注册npm命令，执行一系列node命令，shell命令。

8. 集大成 脚手架 - vue-cli、create-react-app、自定义脚手架 问题：上述的软件如果每次新建项目都要重新配置一边会有很多重复动作，编写脚手架，能够让不熟悉配置的人也能快速拥有相关功能。