前端工程化

什么是前端工程化

前端工程化，是指遵循一定的标准和规范，通过工具去提高效率降低成本的一种手段。如今被广泛的关注和探讨，究其原因，主要是因为现在前端应用功能要求不断提高，业务逻辑日益复杂，作为当下互联网时代的前端技术，可以说是占据了整个开发行业的半壁江山。
从传统的网站到现在的H5，移动APP，桌面应用以及小程序前端技术几乎是无所不能的全面覆盖。在这些表象的背后呢，也是前端行业对我们开发人员的要求发生了天翻地覆的变化。

曾经的前端

很明显曾经的开发方式已经满足不了现在日益复杂的功能。

面临的问题

技术是为解决问题而存在的，比如：

• 想使用ES6+新特性，但是有兼容性问题
• 想使用Less/Sass增强Css的编程性，但是运行环境不能直接支持
• 想使用模块化的方式提高项目的可维护性，也是运行环境不能直接支持
  还有一些重复性工作：
• 部署上线前，需要手动压缩代码及资源文件
• 部署过程需要手动上传代码到服务器
  （那用机器取代人手动的重复操作，是非常合理以及必然的）
• 还有多人协作开发，无法硬性统一大家的代码风格，从仓库中pull回来的代码质量无法保证。
• 部分功能开发时需要等待后端接口的完成

工程化如何解决这些问题

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

一个项目的过程

列举工程化在一个简单项目中的表现：
创建阶段：
可以在创建项目的过程中，使用脚手架工具，自动完成基础的搭建
编码：
可以有代码风格的校验
编译工具让我们使用es6新特性
预览/测试：
可以使用现代化的Web Serve提供热更新体验
通过Source Map定位源代码的问题
提交：
使用git hook自动在提交前做项目质量检查，代码风格检查
部署：
CI/CD 自动发布

工程化不等于工具

工程化并不等于某一个具体的工具，因为在现阶段有部分的工具它过于强大，比如说像webpack，就导致了很多人误认为工程化就是指webpack，只要用了webpack，就代表有了工程化，并不是这样的。
工具并不是工程化的核心，核心应该是对项目整体的一种规划或者架构，工具是这个过程当中，用来去帮我们落地，去实现这种规划或架构的手段。

image.png

工程化的第一件事，应该如图所示，我们去规划一个项目整体的工作流架构，其中包括我们要去规划文件的组织结构，使用什么样的语法，什么样的规范，什么样的标准去编写代码，要通过什么样的方式去做前后端分离，我们是基于ajax去做分离，还是基于中间层去做分离。这些都是我们在一开始的时候应该先明确的一个规划，有了整体的规划后，再具体去考虑我们应该选择搭配哪些工具，做哪些具体的配置选项，来实现我们的规划，这才是一个公众化应该有的过程。

一些成熟的工程化集成

我们可以从这些成熟的工程化集成找到一些思路，很多人说这是官方给出的脚手架，其实不是这样的，不同于我们之前提到的工具，这几个工具属于特定类型的项目，官方给出的集成式工程化方案，比如拿Vue-cli举例，Vue-cli不仅仅帮忙创建了项目，更多的是约定了vue项目应该是个什么样的结构，还有热更新的开发服务，eslint校验等等上节说的某些纬度。

牛逼的Node.js

工程化的一切都应该归功于node，正如ajax给前端带来了新的生命力，node除了让js有了在服务端的舞台，它更是让前端行业有了一次工业革命，没有node就没有现在的前端，当今包括以后，几乎所有的工具都是用node开发的，所以前端工程化是由node来驱动的。

五个维度落实前端工程化：
《脚手架工具开发》
《自动化构建系统》
《模块化打包》
《项目代码规范化》
《自动化部署》