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

一、前端工程化简介

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

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

二、前端发展历史

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

第一阶段:前端最早期的只是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 轮番上阵,把琐碎活全自动化。

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

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

相关推荐
longze_720 分钟前
Vue中:deep()和 ::v-deep选择器的区别
前端·javascript·vue.js
太阳伞下的阿呆3 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny4 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴4 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔5 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔5 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔5 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Wgllss5 小时前
完整案例:Kotlin+Compose+Multiplatform跨平台之桌面端实现(一)
android·架构·android jetpack
Nan_Shu_6145 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止6 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix