前端工程化介绍

前端工程化

一、简单介绍

1. 一个工程的生命周期

• 工程立项
• 需求分析
• 产品原型
• 开始实施
• 测试部署
• 上线运行

2. 什么是前端工程化

前端工程化就是通过各种工具和技术，提升前端开发效率的过程。

• 前端工程化的内容：各种工具和技术
• 前端工程化的作用：通过使用工具🛠️，提升开发效率。

3. 前端工程化解决的问题

• 项目上线前，压缩代码
• 对ES6＋或CSS3新特性进行转换
• 对less等CSS的预编译语言进行编译处理
• 格式化代码
• …

4. 前端工程化的内容

1. 脚手架工具：vue-cli等
2. 压缩工具、模块化打包：webpack等
3. 自动化工具：Grunt、Gulp等
4. 转换工具：Babel
5. 格式化工具：ESLint

二、脚手架工具

1. 脚手架的作用

创建项目的基本结构、提供项目的规范和约定。

2. 脚手架的分类

• 通用脚手架：yeoman
• 专用脚手架：vue-cli、create-react-app、angular-cli

3. 构建自己的脚手架工具

保姆级教程，三十行代码让你拥有自己的脚手架工具