什么是前端工程化?为什么会有前端工程化?

一、前端工程化简介

我们整天在说前端工程化,那我我们思考一下,为什么会有前端工程化这个概念?

我们来一起回顾前端的发展历史,通过这个发展历史我们就能知道为什么会有【前端工程化】这个概念。

二、前端发展历史

看下面流程图我们可以看出来:

第一阶段:前端最早期的只是HTMLCSSJS(此时只是前端发展的一个雏形,【JS】还没有模块化的概念),随着页面发展我们发现一个页面引入太多JS脚本,将大大增加维护成本;

第二阶段:已经出现了模块的概念,会按照模块的概念进行拆分,我们如何拆分模块,如何放置这些模块?此时已经有了一个工程化的概念;

第三个阶段:模块已经划分出来,但是我们部署的时候还是想合并在一起,就涉及到了早期的打包处理;

第四个阶段:前端进一步复杂之后,前端需要承载的功能更多了,逐步开始进行前后端分离,前端也可以独立的开发了。此时前端也出来了一些新的概念,比如说:SPAAngularVue等。此时就要开始考虑路由如何规划?开发时如何调试?开发完如何构建?构建完如何发布?这一切的东西才构成了【前端工程化的概念】;

三、 工程化整体流程

下图所示,就是我们从零开始整个前端工程化的考虑范围

  1. 从创建项目与开发阶段--> 我们要使用脚手架,对应的Eslint规范以及我们要使用什么UI组件库
  2. CI --> 持续集成: 在一个集中的环境去构建我们的项目(避免不同协作人员环境不同带来的Bug)
  3. CD --> 持续部署

为什么开篇说到后端没有工程化的概念?

比如Java语言,他天生就是一种企业级的开发语言,他已经把上述流程包括在里面,不需要自己在去做这些基础建设;而JS是一门脚本语言,在不断开发不断迭代的进展中演变出了前端工程化的这个概念。

三、大厂工程化实践及开源方案

  1. 蚂蚁金服 开源的 UmiJS;
    它提前预定好很多功能,我们可以做到开箱即用(包含基础配置比如路由、mock、构建(Webpack)、部署)。
  1. 阿里 开源的 飞冰 它和 UmiJS 一样也是基于React去设计的,飞冰比 UmiJS 内置的功能要更多一点,比如:数据请求、状态管理、日志打印、菜单配置等等。

  2. 字节跳动开源的 MODERN.js

    MODERN 会比飞冰与UmiJS包含的内容更多一些,它是按照业务场景把功能做了一个更细致的分类,比如:正常网站、中后台、桌面应用、微前端等等,主要的是支持Vue

四、总结

说白了,前端工程化就是被"复杂"逼出来的------代码越写越多,功能越搞越花,总不能一直靠复制粘贴续命吧?于是脚手架、打包工具、CI/CD 轮番上阵,把琐碎活全自动化。

如今大厂连方案都给你开源好了,照着抄作业就行。

记住:工程化的终极目标不是折腾工具,而是让咱能更优雅地摸鱼......更高效地搬砖! 😎

相关推荐
林太白2 分钟前
动态角色权限和动态权限到底API是怎么做的你懂了吗
前端·后端·node.js
每一天,每一步7 分钟前
React页面使用ant design Spin加载遮罩指示符自定义成进度条的形式
前端·react.js·前端框架
moyu8418 分钟前
Pinia 状态管理:现代 Vue 应用的优雅解决方案
前端
Deepsleep.19 分钟前
吉比特(雷霆游戏)前端二面问题总结
前端·游戏
NineData24 分钟前
NineData 最新发布 SQL Server 双向实时同步功能
数据库·后端·架构
wycode30 分钟前
# 面试复盘(2)--某硬件大厂前端
前端·面试
怪可爱的地球人31 分钟前
ts枚举(enum)
前端
做你的猫34 分钟前
深入剖析:基于Vue 3与Three.js的3D知识图谱实现与优化
前端·javascript·vue.js
渊不语38 分钟前
富文本编辑器自定义图片等工具栏-完整开发文档
前端
用户239712822487038 分钟前
taro+vue3+vite项目 tailwind 踩坑记,附修复后的模板源码地址
前端