前端工程化概述

1,382 阅读7分钟

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

定义

前端工程化是指遵循一定的标准和规范,通过工具去提高效率降低成本的一种手段。

背景

前端工程化这些年的被广泛的关注和探讨,究其原因主要是因为前端应用现在功能要求不断提高,逻辑日益复杂。作为当下互联网时代不可或缺的技术,前端可以说是占据了整个开发行业的半壁江山。从传统的网站到现在移动App、桌面应用以及小程序,前端技术几乎是无所不能的全面覆盖。在这些表象的背后呢,实际上是前端行业对我们开发人员的要求发生了天翻地覆的变化。

以往这种通过Demo套模板,再去调页面的刀耕火种方式已经完全不符合当下对开发效率的要求了。前端工程化就是在这样一个背景下被提上台面,成为咱们前端工程师必备的手段之一。

面临的问题

技术往往是为了解决问题而存在的,前端工程化也不例外,在这里列举一些大家在日常开发过程当中,经常会面临的一些问题。

  1. 想要使用 ES6+ 新特性,但是兼容有问题。
  2. 想要使用 Less/Sass/PostCSS 增强CSS的编程性,但是运行环境不能直接支持。
  3. 想要使用模块化的方式提高项目的可维护性,但是运行环境不能直接支持。
  4. 部署上线前需要手动压缩代码及资源文件,部署过程需要手动上传代码到服务器。
  5. 多人协作开发无法硬性统一大家的代码风格,从仓库中pull回来的代码质量无法保证。
  6. 部分功能开发时需要等待后端服务接口提前完成。

主要解决的问题

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

一切重复的工作都应该被自动化

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

以一个最简单的项目开发流程为例,来看看前端工程化在这个过程当中的表现,让大家先从整体的角度对前端工程化有一个全面的认识。

  1. 创建项目的过程中可以使用脚手架工具帮我们完成基础结构的搭建。
  2. 编码环节我们可以借助于工程化的工具自动化地去帮我们做一些代码的格式化以及代码风格的校验,从而去确保我们每一个开发人员写出来的代码都是相同的风格,但除此之外,我们还可以借助一些编译工具,让我们在开发阶段可以直接去使用一些新的特性,从而提高代码编码的效率。
  3. 预览环节我们可能需要借助Apache、 Nginx这样的Web服务器去提供一个基础的Web服务让我们的应用可以运行起来,这种传统的Web服务是没有办法提供热更新体验的,我们可以借助一些现代化的Web Server提供这种热更新的体验,热更新具体来说就是我们在编码完成过后就可以在浏览器里面直接看到最新的结果,不用自己手动去刷新,这是一个非常友好的开发体验。除此之外,我们在开发阶段肯定会用到编译,编译就涉及到我们实际编写的代码和最终运行的代码,他们之间有一个转换。此时如果说你实际运行过程当中出现了一些问题,你需要去定位源代码对应的位置,那么就需要借助于Source Map这样的工具去完成。除此之外,还可以有一些Mock数据的方式去解决后端服务未完成的情况下,我们怎样去提前开发具体的业务功能。
  4. 提交环节,我们可以使用Git Hooks去自动化地在我们代码提交之前去做项目整体的检查,包括项目质量检查以及项目代码风格的检查,这就确保我们不会把有问题的代码提交到仓库当中,这样也就解决了我们之前所说的从仓库当中拉回来代码有问题的这种情况,除了可以对项目的质量作检查之外,我们甚至连提交日志Git Log也可以做严格的格式限制,这样我们就可以在日后做回滚的时候有很大的一个参考价值。
  5. 部署环节,前端工程化表现的地方就更多了。我们可以用一行命令去代替传统的FTP上传,甚至还可以去实现在代码提交过后,自动化地通过持续集成或者持续部署的方式自动将我们的代码部署到服务器。这样就避免了人为手动去操作产生的一些不稳定因素。

工程化 ≠ 某个工具

为什么这样说呢?因为在现阶段有部分的工具过于强大,比如说像Webpack,导致了很多新手就误认为工程化就是Webpack。这样的工具并不是工程化的核心,工程化的核心应该是对项目整体的一种规划或者架构,而工具在这个过程当中,只是用来去落地去实现这种规划和架构的一种手段。

以一个非常普通的项目为例,我们落实工程化的第一件事,应该是图中所给出来的这样,去规划一个项目整体的工作流架构,其中包括规划文件的组织结构,源代码开发范式(使用什么样的语法,什么样的规范,什么样的标准去编写代码),再一个就是我们要通过什么方式去做前后端分离,是基于Ajax,还是基于中间层去做分离,这些都是我们在一开始的时候需要明确的规划。有了这些整体的规划过后,再具体去考虑应该选择搭配哪些工具做哪些具体的配置选项去实现我们工程化的整体的一个规划。

我们也可以从一些成熟的集成的工程化方案当中找到一些思路。比如像 一下这些:

很多人说,这些工具实际上就是官方给出的脚手架,其实不是这样的。不同于我们之前提到的工具,它们其实应该属于特定类型的项目,官方给出的集成式工程化方案,那为什么这样说呢?拿vue-cli举例子,它不仅帮我们创建了项目,它更多的是约定了vue项目应该是一个什么样的结构,例如public、src目录以及一些特定的文件。除了这些约定之外,还提供一些工具,让你可以有热更新的开发服务,还有自动编译vue单文件组件以及一些其他模块的文件。除此之外还可以做一些代码风格的校验,也就是我们所说的Lint,这些都是集成在vue-cli的service当中。

工程化与Node.js

我认为工程化的一切都应该归功于Node.js。之前,有人说Ajax给前端带来了新的生命力,那我个人觉得Node.js对于前端而言,它除了让JavaScript有了一个新的舞台,它更多的是让我们整个前端行业进行了一次工业革命,可以毫不夸张的说,没有Node.js就没有今天的前端,而且在接下来很长一段时间当中,我们用到的工具几乎都是用Node.js去开发的。所以说,我认为前端工程化是Node.js强力驱动的。