前端工程化 - 概述
教程- 阅读
前端工程化是指遵循一定的标准和规范，通过工具提高开发效率、降低维护成本的一种手段。近些年被广泛的关注和探讨，究其原因，主要是因为前端应用的功能要求不断提高，业务逻辑日益复杂。
作为当下互联网时代唯一不可或缺的技术，前端占据了整个开发行业的「半壁江山」。从传统的网站到现在的 H5、移动 App、桌面应用以及小程序，前端技术几乎无所不能的全面覆盖。
在这些表象的背后实际上是前端行业对开发人员的技能要求发生了天翻地覆的变化，以往“写 Demo，套模板，调页面”这种刀耕火种的方式已经完全不符合当下对开发效率的要求。前端工程化就是在这样的背景下被提上台面，成为前端工程师必要的手段之一。
解决的问题
技术是为了解决问题而存在的，前端工程化也不例外，这里我列举一些大家在日常开发过程中经常会面临的一些问题（不仅限于此）：
- 想要使用 ES6、ES7 这些新特性，但是兼容有问题
- 想要使用 Less / Sass / PostCSS 增强 CSS 的编程性，但是运行环境不能直接支持
- 想要使用模块化的方式提高项目的可维护性，同样运行环境不能直接支持
- 项目部署上线前需要手动压缩资源文件，过程中需要手动上传代码到服务器，还容易出错
- 多人协作开发，无法硬性统一大家的代码风格
- 从仓库中 pull 回来的代码质量无法保证
- 部分功能开发时需要等待后端服务接口提前完成
我们将这些问题归纳、总结为以下这几点：
- 传统语言或语法的弊端
- 无法使用模块化 / 组件化
- 重复的机械式工作
- 代码风格、格式无法统一
- 仓库代码质量无法保证
- 依赖后端服务接口支持
- 整体依赖后端项目
具体表现
接下来，我就以最简单的项目开发流程为例，看看前端工程化在这个过程的表现，让大家先从整体角度对前端工程化有一个全面的认识。
从项目的创建、到编码、再到预览、再到提交、最后到部署，每一个环节我们都可以通过工程化的方式大大提到工作效率，具体来说就是：
- 创建项目过程我们可以使用脚手架工具自动完成；
- 编码过程我们可以通过编译或者转化工具提前使用一些新特性，利用格式化和代码检查工具自动检测和修复代码中的基础问题；
- 预览时再通过 Web Server 自动预览并享受热更新的体验，并且可以使用 Mock 的方式在后端服务接口未完成的情况下，直接开发具体的业务功能；
- 到了代码提交环节，我们可以使用 Git Hook 自动化的在提交之前做出项目检查，确保不会提交有问题的代码，甚至连提交的日志都可以严格限制格式；
- 最后在部署阶段，我可以使用一行命令代替传统手动的 FTP 上传，甚至还可以实现在代码提交过后自动部署到服务器；
工程化 ≠ 工具
现阶段由于部分工具的「过于强大」，例如 Webpack，很多新手误认为工程化就是 Webpack，有了 Webpack 就是有了工程化。其实不然，工具并非工程化的核心，工程化的核心应该是对项目的一种规划或者架构，工具只是落地实现的手段。
以一个普通项目为例，落实工程化的第一件事是规划整体项目的工作流架构，包括：
- 文件的组织结构
- 源代码的开发范式
- 语言或者语法规范
- 前后端分离方式
- 其他对开发阶段的需求
有了整体的规划过后，再来具体考虑选择搭配使用哪些具体的工具，配置具体的选项。这才是一个工程化的过程。
当然你也可以从一些集成式的工程化方案中找到思路，例如：
- create-react-app
- vue-cli
- angular-cli
可能很多人会认为这些就是脚手架工具，其实不然，不同于之前提到的工具，这些应该属于特定类型的项目中官方给出的集成式工程化方案。就拿 vue-cli 来说，创建项目、约定项目结构、提供开发服务、编译、Lint，这些都是集成在其中的。
厥功至伟的 Node.js
当然这一切都归功于 Node.js，如果说 AJAX 给前端带来了新的生命力，那么 Node.js 对于前端而言，除了让 JavaScript 有了新的舞台，它还给整个前端行业带来了一次「工业革命」，可以毫不夸张的说没有 Node.js 就没有今天的前端。
接下来的很长一段时间中，我们用到的工具几乎都是使用 Node.js 开发的，所以说前端工程化由 Node.js 强力驱动。
总结
当然工程化在我看来是一个非常庞大的概念，也一直在不断成长的过程中，值得强调的是：不管它如何发展，始终都只是为了解决问题而存在，切莫为了技术而技术。
接下来我们就通过五个专题具体学习如何在这些维度落实前端工程化。