关于前端工程化的字眼现在已经”横尸”各大静态博文平台了,包含一部分专业领域的书籍中。但是这些内容中,或者说”快餐知识”中似乎都有一个通病,那就是没有去阐述几个概念:

  • 前端工程化出现的背景是什么?
  • 前端工程化的目的是什么?
  • 什么是前端工程化呢?

虽然实践固然重要,但是我还是想单独抽出这么一篇内容作一个总结性的阐述。所谓:”知其然,同需知其所以然”。

前端工程化的背景

谈及背景,我们总会联想到现状,当然这个”现状”目前就是指代”过去的现状”了。

我觉得就过去而言,我们可以首先来聊一聊过去到现在的开发模式演变:

  • 前后端不分离 JSPejsjade ……
  • 前后端分离:Java 主张的 MVC 时代,使 UI 负担脱离后端研发
  • 模块化开发,SPA 入世:随着 ajax 技术的出现和早期 CDN 的推崇,前端迎来了 SPA 时代。同时也出现了 jQuery 般的 IIFE 模块化方案
  • 模块化开发+ MVVMReactVueSvletesolidwebpackvite等 的出现。

随着这一系列的开发模式的演变,以及互联网 web 开发业务的日益复杂和多元化。各种巨石应用的治理、企业历史技术负债的优化,前端开发效率的提升,开发上线全流程的观测等等一系列的问题都是前端工程化出现的背景。

前端工程化的目的

  • 开发效率
    • 模版开发
    • JSX
    • lesssass
  • 开发规范
    • eslint
    • prettier
    • husky
    • commit cz
  • 性能
    • 构建速度
    • 访问性能
    • 单测性能
    • 兼容性
    • 监控、埋点
  • 持续集成
    • CI/CD
    • jekins
    • k8s
    • docker

大部分的工程化手段基本都集中在解决上述问题,这也是前端工程化的目的。

前端工程化

上面讲述了这么多,都始终没解释,什么是前端工程化?

先上一波知乎大牛的解释:

搜索引擎上关于 前端工程化 的介绍还蛮多,其实这里我更赞同 程墨Morgan 的回答:

的确是这样,比如其他的回答中,介绍各种流程中的”手段”,那这些手段又何尝不是解决这些软件开发中所碰到的问题呢,不论什么”端”,其实都将就一个字

文末彩蛋

鉴于近期的 ChatGPT 的火热,部分人的内心或许会有些许动摇,但是还是那句话:机器取代人的时代还早

高分观点:

大胆的去做吧,just try,相比于 程序 而言,程序员 才是一笔宝贵的财富。

参考