前端工程化到底是啥?可不止Webpack哦~

前言

什么是前端工程化,是我去年困扰我很久的一个问题,打开搜索引擎一搜,能找到四个关键字,模块化、组件化、规范化、自动化,但一看这几个字,更加迷茫了,没说解决了什么问题。大部分搜出来的都是 webpack、babel、eslint、gulp 等编译相关的配置,对于 2023年 来说上面的回答着实有点管中窥豹了

大家也可以想想和评论区交流下,你觉得什么是前端工程化,最好有具体的实践

思考

直到有一天发现前端工程化其实就是利用工具链解决前端在开发过程中提升效率和质量的问题

  1. 质量
  2. 效率

记住这两点,后面会举大量的例子,来证明这两个结论,后面还会再补充一个(协作)
在这里插入图片描述

前端工程化

我的理解是,前端工程化就是围绕敏捷开发流程,保证项目在团队协作过程中,能快速达到交付的标准,降低事故,所以答案呼之欲出了。想尽办法,提高持续交付的能力。

敏捷开发在一般的公司,都会有下面这几步:评审、准备开发、开发阶段、发布交付、上线。那就可以在这几步里面去提高效率,保证代码质量

评审

  1. UI 标准规范,组件库
  2. 物料库

准备开发

  1. 仓库的创建,devops 平台(例如域名地址生成,网关路径匹配)
  2. 项目初始化,也就是脚手架初始化项目
  3. 包管理 monorepo ,文件管理、目录管理等规范
  4. js、css 等规范

开发阶段

  1. git 分支管理,code review 等
  2. IDE
  3. 编译相关,也就是基于 webpack、vite 等 eslint 等大家熟知的工具链相关
  4. 私有化 npm 仓库
  5. 本地 mock 服务
  6. 打包配置
  7. 单元测试
  8. 发布交付

发布交付

  1. git hook 提交等流水相关
  2. 打包构建,CDN 相关
  3. jenkins、 docker、k8s 等镜像管理
  4. 自动化测试
  5. A、B test

上线

  1. 前端监控
  2. 埋点

技术卷技术,具有普遍性

其实上面举得例子都是技术卷技术,它是一种可迁移到任何一家公司的技术方案

例如:

  1. git 分支管理,就是保证了能团队能并行开发,代码减少冲突,提交团队协作
  2. mock 服务,提高跟后端开发的效率,建立了一种约定式开发的协作流程
  3. 前端监控,保证了 bug 出现之后,能快速修复
  4. 单元测试和 code review 是保证质量的
  5. ui 规范和物料库,都是提高开发效率的

为什么会叫技术卷技术,正常情况下,难题会分成两种,一种是业务复杂度,一种叫偶然复杂度,技术卷技术,就是解决偶然复杂度的,就好像有句话叫做,兵未动 粮草先行,还有一句话叫做非战斗减员,其实就是让无关业务的问题下沉,尽量保证在开发的过程中不会出现或者不需要考虑。

设想一下。如果没有这种普遍性的前端工程化

新入职的小黄满怀期待的装好 vscode, 一打开,代码格式有 2 个缩进,有的是 4 个缩进,然后执行 npm install,却出现好多的 error,当小黄花了半小时解决了包版本的问题,npm start 启动,居然打开是空页面,废了半天的时间,才发现是环境变量导致域名不匹配的和跨域的问题,当小黄好不容易写完代码,准备联调,却发现怎么也调不通,小黄怒气冲冲的去找后端,后端笑着说,不好意思。改了一个接口没跟你说。终于联调完了。准备部署了,设计师却说,这里要再改改颜色和圆角度数,小黄说,这是按照你说的开发的,设计却说我没说,你就再改改吧,几分钟的事情。好不容易发布上线,居然踩坑了,主流程挂了,小黄要背锅了。经历了这一波之后,再也没见过小黄了(垃圾公司)。

技术卷业务,升职加薪

这方面是根据某一行的业务来的,不具有普遍性,大家可以多交流,后面会单独开一篇文章讲技术卷业务 这里说一下

  1. 技术卷技术,提高前端工程化的能力
  2. 技术卷业务,提高前端架构的能力

如何提高前端工程化能力

就是多看,多学习,多交流,见得多了,就自然会了,例如

  1. 一键生成 icon 组件
  2. 一键生成组件模板
  3. 一键压缩图片
  4. 一键部署 cdn、oss 等
  5. 完整流程的云 devops 平台
  6. 阿里云监控
  7. 远程组件加载
  8. 文档、单元测试的生成,例如 storybook[6]
  9. modern.js[7]

总结

前端工程化就是围绕敏捷开发流程,保证项目在团队协作过程中,能快速达到交付的标准,降低事故,主要从这几步中去发力:评审、准备开发、开发阶段、发布交付、上线。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/98943.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言刷题训练DAY.7

1.及格分数 解题思路&#xff1a; 这里直接用while语句控制循环&#xff0c;if else语句判断即可。 解题代码&#xff1a; #include<stdio.h> int main() {int a 0;while(scanf("%d", &a) ! EOF){if (a >60)printf("Pass\n");elseprintf…

嵌入式设备应用开发(其他第三方库)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 前面我们介绍的qt、boost这些都是通用库。也就是说,不管什么样的场景,这些库都可以拿过来使用。然而在实际开发中还有一些第三方库,它是需要和实际场景联系在一起的。也就是说,…

如何编写一个通用的函数?

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;&#x1f35f;&#x1f32f;C语言进阶 &#x1f511;个人信条: &#x1f335;知行合一 金句分享:…

java云智慧工地管理平台系统源码

智慧工地将“互联网”的理念和技术引入建筑工地&#xff0c;从施工现场源头抓起&#xff0c;最大程度地收集人员、安全、环境、材料等关键业务数据&#xff0c;依托物联网、互联网&#xff0c;建立云端大数据管理平台&#xff0c;形成“端云大数据”的业务体系和新的管理模式&a…

实现简单的element-table的拖拽效果

第一步&#xff0c;先随便创建element表格 <el-table ref"dragTable" :data"tableData" style"width: 100%" border fit highlight-current-row><el-table-column label"日期" width"180"><template slot-sc…

使用 Node.js 生成优化的图像格式

使用 Node.js 生成优化的图像格式 图像是任何 Web 应用程序的重要组成部分&#xff0c;但如果优化不当&#xff0c;它们也可能成为性能问题的主要根源。在本文中&#xff0c;我们将介绍如何使用 Node.js 自动生成优化的图像格式&#xff0c;并以最适合用户浏览器的格式显示它们…

Android Studio 之 Android 中使用 HanLP 进行句子段落的分词处理(包括词的属性处理)的简单整理

Android Studio 之 Android 中使用 HanLP 进行句子段落的分词处理&#xff08;包括词的属性处理&#xff09;的简单整理 目录 Android Studio 之 Android 中使用 HanLP 进行句子段落的分词处理&#xff08;包括词的属性处理&#xff09;的简单整理 一、简单介绍 二、实现原理…

四款源代码扫描工具

一、DMSCA-企业级静态源代码扫描分析服务平台 端玛企业级静态源代码扫描分析服务平台&#xff08;英文简称&#xff1a;DMSCA&#xff09;是一个独特的源代码安全漏洞、质量缺陷和逻辑缺陷扫描分析服务平台。该平台可用于识别、跟踪和修复在源代码中的技术和逻辑上的缺陷&…

jstack(Stack Trace for Java)Java堆栈跟踪工具

jstack&#xff08;Stack Trace for Java&#xff09;Java堆栈跟踪工具 jstack&#xff08;Stack Trace for Java&#xff09;命令用于生成虚拟机当前时刻的线程快照&#xff08;一般称为threaddump或者javacore文件&#xff09;。 线程快照就是当前虚拟机内每一条线程正在执…

uniapp 微信小程序 绘制海报,长按图片分享,保存海报

uView UI 2.0 dcloud 插件市场地址 弹窗海报源码 <template><!-- 推荐商品弹窗 --><u-popup :show"haibaoShow" mode"center" round26rpx z-index10076 bgColortransparent safeAreaInsetTop close"goodsclose"><image …

Linux 内核与架构速查

Linux 内核与架构速查 博主博客 https://blog.uso6.comhttps://blog.csdn.net/dxk539687357 本文主要记录查询 Linux 计算机的内核与架构&#xff0c; 用于下载对应架构的第三方软件。 一、介绍 如上图所示&#xff0c; 有时候我们下载一些第三方软件&#xff0c; 软件会有很…

Googel Earth Engine 配置Python 环境

1. 安装并配置python环境 此处不再赘述 2. 安装 earthengine-api pip install earthengine-api C:\Users\xixi>pip install earthengine-api Collecting earthengine-apiUsing cached earthengine_api-0.1.363-py3-none-any.whl Requirement already satisfied: google-c…

前端框架Vue

Vue 学习路线 学习HTML、CSS和JavaScript基础知识&#xff1a;Vue是基于JavaScript的框架&#xff0c;所以首先需要掌握HTML、CSS和JavaScript的基础知识&#xff0c;包括DOM操作、事件处理、变量和函数等。 学习Vue的基本概念&#xff1a;了解Vue的核心概念&#xff0c;如Vu…

深入了解 Java 中 Files 类的常用方法及抽象类的 final 修饰

文章目录 Files 类常用方法抽象类的 final 修饰 &#x1f389;欢迎来到Java学习路线专栏~深入了解 Java 中 Files 类的常用方法及抽象类的 final 修饰 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客&#x1f388;该系列文章专栏&#xff1a…

C++入门知识点——解决C语言不足

&#x1f636;‍&#x1f32b;️Take your time ! &#x1f636;‍&#x1f32b;️ &#x1f4a5;个人主页&#xff1a;&#x1f525;&#x1f525;&#x1f525;大魔王&#x1f525;&#x1f525;&#x1f525; &#x1f4a5;代码仓库&#xff1a;&#x1f525;&#x1f525;魔…

【Vue-Router】导航守卫

前置守卫 main.ts import { createApp } from vue import App from ./App.vue import {router} from ./router // import 引入 import ElementPlus from element-plus import element-plus/dist/index.css const app createApp(App) app.use(router) // use 注入 ElementPlu…

Tomcat部署与优化

TOMCAT介绍 tomcat开放源代码web应用服务器&#xff0c;Java代码开发的 tomcat就是处理动态请求和基于Java代码的页面开发 可以在html当中写入java代码&#xff0c;tomcat可以解析html页面当中的java&#xff0c;执行动态请求&#xff0c;动态页面 机制有问题&#xff1a;bud…

VScode搭建Opencv(C++开发环境)

VScode配置Opencv 一、 软件版本二 、下载软件2.1 MinGw下载2.2 Cmake下载2.3 Opencv下载 三、编译3.1 cmake-gui3.2 make3.3 install 四、 VScode配置4.1 launch.json4.2 c_cpp_properties.json4.3 tasks.json 五、测试 一、 软件版本 cmake :cmake-3.27.2-windows-x86_64 Mi…

八种架构演进

日升时奋斗&#xff0c;日落时自省 目录 1、单机架构 2、应用数据分离架构 3、应用服务集群架构 4、读写分离/主从分离架构 5、冷热分离架构 6、垂直分库架构 7、微服务架构 8、容器编排架构 9、小结 1、单机架构 特征&#xff1a;应用服务和数据库服务器公用一台服务…