基本介绍

什么是前端工程化

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

前端工程化的意义

可以解决下列问题：

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

如何去做前端工程化

概览

1. 创建项目
   • 创建项目结构
   • 创建特定类型文件
2. 编码
   • 格式化代码
   • 校验代码风格
   • 编译、构建、打包
3. 预览/测试
   • Web Server / Mock
   • Live Reloading / HMR
   • Source Map
4. 提交
   • Git Hooks
   • Lint-staged
   • 持续集成
5. 部署
   • CI / CD
   • 自动发布