前端工程化概述

工程化主要解决的问题

• 想要使用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居于首功。