什么是前端工程化

• 前端工程本质上是软件工程的一种。
• 软件工程化关注的是性能、稳定性、可用性、可维护性等方面，注重基本的开发效率、运行效率的同时，思考维护效率。
• 一切以这些为目标的工作都是"前端工程化"。工程化是一种思想而不是某种技术。

前端工程化的意义

可以解决下列问题：

• 传统语言或语法的弊端
  • 想要使用 ES6+ 新特性，但是兼容有问题
  • 想要使用 Less / Sass / PostCSS 增强 CSS的编程性，但是运行环境不能直接支持
• 无法使用模块化、组件化
• 重复的机械式工作
  • 部署上线前需要手动压缩代码及资源文件
  • 部署过程需要手动上传代码到服务器
• 代码风格统一、质量保证
• 依赖后端服务接口支持
• 整体依赖后端项目

脚手架工具

内容概要

• 脚手架的作用
• 常用的脚手架工具
• 通用脚手架工具解剖
• 开发一款脚手架

脚手架的作用

• 快速搭建项目
• 创建项目基础结构、提供项目规范和约定

常用的脚手架工具

服务于特定框架的脚手架工具

• vue-cli
• create-react-app
• angular-cli

自动化构建

什么是自动化构建

• 自动化就是让电脑帮你干活
  • 不管是代码压缩还是 less 转换，通过手动方式进行工作量巨大（例如手动压缩2000行代码，估计程序员就疯了）。
• 构建就是转换，将开发代码转换成生产环境能够运行的代码
• 自动化构建是指将手动构建任务，进行排列组合，然后通过命令（或工具）自动执行的过程。
• 实现自动化构建最简单的方式是 npm scripts （npm 脚本）。

为什么需要自动化构建

• 代码需要编译（ CSS3，ES6+ ）， 保证浏览器的兼容性
• 代码需要压缩（ CSS，JS，HTML，图片等 ）。节省带宽，提高加载速度
• 代码需要做格式化校验，统一代码风格。