前端工程化

工程化概述

工程化的定义和主要解决的问题

因为前端的发展过快，在开发中占据很大地位，业务不断提高，逻辑更加复杂，从传统的网站到现在的H5，移动APP，各种小程序，桌面应用，所以对前端的要求更加严格

传统开发的劣势

• 从传统的后端写demo，套模板，调页面方式已经不再适应，不符合开发的要求了
• 面临的问题，技术是为了解决问题存在的，解决ES6+的新特性浏览器不兼容，Less或sass或postcss增强运行环境不支持，模块化或者组件化方式提高项目的可维护性运行环境不支持
• 部署上线前需要手动压缩袋吗及资源文件，部署过程需要手动上传代码到服务器
• 多人开发，无法隐形统一代码风格，质量无法保证
• 需要等待后端接口服务等

一个项目过程中工程化的表现

一切以提高效率、降低成本、质量为保证的目的都属于工程化

一切重复的工作都应该工程化

• 创建项目结构，创建指定类型文件
• 格式化代码，校验代码风格，编译/构建/打包
• web server，mock，HRM，Source Map
• Git Hooks，lint-staged，持续集成
• CI/CD,自动发布

工程化不等于工具

因为webpack过于强大，人多认为webpack就是前端工程化 但是工程化不等于某个工具

工程化应该是一种架构，工具是为了架构落地实现的一种手段

一些成熟的工程化集成

工程化与 Node.js

Node增强了前端的范围

• 脚手架工具开发，例如vite
• 自动化构建系统
• 模块化打包
• 项目代码规范化
• 自动化部署