# 前端工程化
# 工程化概述
# 工程化主要解决的问题
- 想要使用
ES6+新特性，但是兼容有问题（传统语言或语法的弊端） - 想要使用
Less/Sass/PostCSS增强CSS的编程性，但是运行环境不能直接支持 - 想要使用模块化的方式提高项目的可维护性，但运行环境不能直接支持（无法使用模块化、组件化）
- 部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器（重复的机械式工作）
- 多人协作开发，无法硬性统一大家的代码风格，从仓库
pull回来的代码质量无法保证（代码风格不统一，质量无法保证） - 部分功能开发时需要等待后端服务接口提前完成
- 整体依赖后端项目
# 工程化的表现
- 创建项目 （使用脚手架完成基础工具的搭建）
- 编码（代码格式化、代码风格校验，编译工具可以将使用的新特性自动编译可运行的语言）
- 预览/测试（
Web Server/Mock前端服务器、Live Reloading/HMR热更新、Source Map定位源代码位置） - 提交（
Git Hooks代码整体质量检查、Lint-staged代码风格检查，持续集成） - 部署（
CI/CD、自动发布）
# 工程化 != 某个工具
工具不是工程化的核心。工程化的核心是对项目整体的规划和架构。而工具只是帮我们实现规划和架构的一种手段。
以一个普通的项目为例，规划一个项目整体的工作流架构，包括规划文件的组织结构，源代码的开发范式、通过什么方式进行前后端分离。这些确定之后再考虑用那些工具，实现我们对整个项目的整体规划。
# 一些成熟的工程化集成
下面创建的并不只是项目，还有一些目录规范、集成工具等其他的工程化解决方案。
- create-react-app
- vue-cli
- angular-cli
- gatsby-cli
前端工程化是由
node.js强力驱动的，Node.js居于首功。
# 脚手架
# 脚手架的本质作用
创建项目基础结构、提供项目规范和约定（相同的组织结构、开发范式、模块依赖、工具配置，更有一些基础代码都相同）
IDE创建项目的过程就是一个脚手架的工作流程
# 脚手架工作原理
脚手架工具就是一个node的CLI应用，创建脚手架就是创建一个CLI应用。在启动过后，会自动询问预设的问题，根据回答的结果根据一些模板文件，生成一个项目结构。
# 脚手架工作过程
- 通过命令行交互询问用户问题(
node中发起交互命令我们使用inquirer模块) - 根据用户回答的结果生成文件（入口文件中进行逻辑实现）
# 常用的脚手架工具
- React项目 ——
create-react-app - Vue项目 ——
vue-cli - Angular项目 ——
angular-cli - Yeoman —— 通用脚手架工具
- Plop —— 同于创建特定类型的文件