什么是前端工程化

546 阅读5分钟

Nodejs的诞生给前端带来了第二次的繁荣,使前端可以深入到更广阔的领域有所作为(多端以及后端),眼看前端跑步迈入一个崭新的阶段,在现阶段如何提高开发体验也成了前端er们更关心的问题,这里就不得不提到前端工程化。

传统意义上的工程化

这里并未在百度百科中找到关于工程化词条定义,个人理解广义上的工程化是指一个系统完成过程中高度的系统化,模块化,规范化的过程。大致意思就是通过各种工具和规范来更高效的完成一个系统的物料,工具,方法的集合。这样说来工程化会涉及各个领域的知识和技术。

前端工程化

每次我面试前端时总会问【你对前端的工程化怎么看?或者怎么理解?】

这个问题可能太笼统,并不是一个很好的问题,但是可以引起现在我们对前端更深刻的思考。首先我们是不是每天只是使用vue或者react来完成业务逻辑,并没有对前端的整个工作流程和涉及到的技术和工具和方法有所思考?

  • 为什么我们可以把页面划分为一个一个的组件?
  • 为什么我们使用现代框架开发时都可以使用npm start来启动开发服务?
  • 为什么我们可以在开发时修改一个文件保存后页面可以立即更新?
  • 为什么我们可以在打包时使用npm run build来构建我们写的代码,生成可以直接部署的前端包
  • 怎么才能在我们打包后自动部署到开发环境或者其他环境?

再把问题拉回来,大部分面试者会回答前端工程化就是webpack,然后围绕webpack云云。首先可以想到这儿应该算是可以接受的答案了,可能大部分前端er会把工程化和构建工具webpack划等号,因为webpack给我们开发提供了很多东西:

  • 提供给我们一个开发服务,可以让我们开发时及时查看页面效果
  • 提供给我们热更新的功能,可以让我们在修改代码时不必重启服务,不必重新刷新页面即可看到页面的修改
  • 可以让我们直接引入图片等各种静态资源等等

回头看开始对工程化的定义,webpack确实让我们的开发更高效,提升了我们的开发体验,可以侠义上画一个等号,但还远远不够。

通过上文提到对工程化的理解,整个前端工程的工程化应该是一个系统性的,模块化的并有一定规范的工具集合,这些要素的目的是让我们高效的完成前端开发,那么我们拿vue-cli创建出来的vue项目举例:

  • 首先vue是一个组件化的项目,页面和组件可以拆分成一个一个的模块,得益于es6我们可以使用export和default实现模块化和组件化。
  • 在项目中我们启动一个开发服务并可以支持热更新
  • 可以引入sass等css预处理器,可以使用图片等静态资源
  • 可以区分运行环境:开发环境,测试环境,生产环境
  • 打包部署等
  • 以上都是webpack提供的能力,让我们开发提效,更专注开发本身
  • 但同时团队中还需要一些开发规范,git的提交规范,这些都是可以通过工具来约束的(eslint,stylelint,commitlint等)
  • 开发完毕后来到测试和上线部分我们还会有其他的工具来支撑
  • 持续集成和持续部署的CI/CD系统(Jenkins,gitlab CI等)
  • 自动测试系统等

通过以上分析发现webpack并不能全等于前端工程化,其中还包括规范的制定,工作流的制定,自动测试,持续集成和交付等环境,这些工具集组成了我们的前端工程化。

工程化不等于某个工具,可以看作是一个系统性的架构,在规则下提效,降低成本,保证质量。

工程化方案

Nodejs的出现使今天的前端生态越来越丰富,它不仅可以做web服务,会更多了来做前端的工具的支持和载体,上文重点讨论的webpack便是基于nodejs的运行时来做的。工程化是工具概念的集合,其实更通俗的理解是- 一切以提高效率、降低成本、质量保证为目的的手段,都属于工程化。例如每次打包自动添加git版本信息到前端包里,我们就可以写一个webpack插件或者node脚本在打包完成后执行,这样也是工程化的一种体现。综上

  • Webpack是前端工程化中的一个工具
  • Nodejs和Webpack打造的前端工程解决方案的核心
  • ES6的发展为前端模块化奠定了基础
  • 利用现有工具进行优化(优化开发体验,优化打包时间,优化打包结果)也是工程化的手段
  • 一切重复的事情都应以工程化的角度考虑和解决

对于前端一个典型的工程化方案大致有如下几项:

  • 创建项目的脚手架(vue-cli,create-react-app等)
  • webpack,vite等构建工具给我提供的开发体验
  • 对编码风格使用工具约束(eslint,stylelint)
  • 对代码管理使用工具约束(husky,commitlint)
  • 工作流的制定
  • 一些类库甚至有自动生成changelog和自动升级版本信息的插件和脚本
  • 其他一些配置
  • CI/CD等涉及到软件交付的整个流程

最后

以上是自己的一些思考,由于个人阅历和技术限制肯定会有偏颇的地方,希望大家一起交流,目前前端已进入一个深水区,你是选择做一个应用开发者还是想在某一方面有所建树呢?这取决于我们平时能否有更多的思考了。