一. 前端工程化概述
- 什么是前端工程化 让我们回想一下一起的前端开发面临的几个问题：
- 想用ES6+的新特性，但是兼容性有问题。
- 想用Less/Sass/PostCss增强 CSS 的编程性，但运行环境不支持。
- 想用模块化的方式提高项目的可维护性，但运行环境不能直接支持。
- 部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器。
- 多人协作开发，无法硬性统一代码风格，从仓库pull回来的代码质量无法保证。
- 部分功能开发是需要等后端服务接口提前完成。
为了解决以上所说的问题，前端工程化应运而生，前端工程化说的就是软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。总结起来，前端工程化解决的问题主要有 6 个部分。
- 传统语言或语法的弊端。（ES6+语法、TypeScript、Sass）
- 无法使用模块化/组件化（ES Modules、Components）
- 重复的机械式工作（Build、Publish）
- 代码风格统一、质量保证（git、ESLint）
- 依赖后端服务接口支持（Mock）
- 整体依赖后端项目（DevServer）
- 如何做"前端工程化" 前端工程化就是为了让前端开发能够“自成体系”，个人认为主要应该从模块化、组件化、规范化、自动化四个方面思考。
- 模块化：简单来说，模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。
- 组件化：模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。
- 规范化：其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。
- 自动化：任何简单机械的重复劳动都应该让机器去完成。 要做到以上几点，我们可以借助一些脚手架工具来帮我们快速实现，比如vue-cli,create-react-app等等。
二. 认识脚手架
1. 什么是脚手架
脚手架工具是前端工程话的发起者，它的本质作用是创建项目基础结构，提供项目规范和约定。
2. 常用的脚手架工具
像vue-cli,create-react-app这类脚手架是能服务于本身的框架，并不通用。
另一类是通用型脚手架工具，代表像 Yeoman。优点是灵活易扩展。
除了 yeoman 这类大型的脚手架工具外，还有很多小而美的脚手架工具，比如 Plop。
Plop 常用于在项目开发过程中创建某类类型的文件，优点类似于 Yeoman 中 sub generator 的概念。
3.脚手架工作原理
脚手架工具就是一个CLI应用。基本都是启动脚手架之后进行命令行交互，根据交互结果结合模板文件形成一个基础的项目结构。
三. 如何开发一个脚手架
其实开发一个简易的脚手架还是比较简单的，我自己简单实现了一个脚手架工具，这是github地址，这个脚手架也发布到了npm上，这是npm地址。
