vite instanceof 失效

背景:给一个巨石单体项目进行标准化模块拆分,封装出来的模块代码用 vite 进行构建,但模块启动后页面上的表现一直和 webpack 那版不一致

一步步 debug 后,发现问题出在下面这个判断条件

const GeneratorFunction = function* () {}.constructor;function(func){if (func instanceof GeneratorFunction){ // do something} else {// do something}
}

问:当 func 是生成器函数时,判断条件输出 true 还是 false


答案:

vite:false

webpack:true

为什么

条件判断的本质是在判断 func.__proto__ 和 GeneratorFunction.prototype 两个值引用是否一致

vitewebpack 下输出看看:

console.log(func.__proto__)   ==> ƒ GeneratorFunctionPrototype() { }
console.log(GeneratorFunction.prototype)   ==> ƒ GeneratorFunctionPrototype() { }

两个值看起来一样,但进行引用比较

func.__proto__ === GeneratorFunction.prototype

会发现在 vite 输出 false,在 webpack 输出 true

谁对谁错?

当我在控制台搜索 GeneratorFunctionPrototype

发现 vite 编译后的产物里但凡使用了生成器函数,这个模块里都会重复声明一次 GeneratorFunctionPrototype
在这里插入图片描述

webpack 的编译产物里只有这一个来源,所以引用是一致的

在这里插入图片描述

GeneratorFunctionPrototype 应该是全局标准的唯一引用,因此 webpack 的表现是正确的

怎么解决

很遗憾,在 vite 里现阶段还无法通过有效手段编译出唯一 GeneratorFunctionPrototype
(如果你有方法请留言评论哦,蟹蟹)

我只能把判断条件换一种写法:

function(func){if (saga.constructor.name.startsWith('GeneratorFunction')){ // do something} else {// do something}
}

注:vite devprod 都会出现这个问题

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

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

相关文章

【Golang 面试 - 基础题】每日 5 题(七)

✍个人博客:Pandaconda-CSDN博客 📣专栏地址:http://t.csdnimg.cn/UWz06 📚专栏简介:在这个专栏中,我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞👍收藏…

Vue 3 中使用 InMap 绘制热力图

本文由ScriptEcho平台提供技术支持 项目地址:传送门 Vue 3 中使用 InMap 绘制热力图 应用场景介绍 InMap 是一款强大的地图组件库,它提供了一系列丰富的可视化功能,包括热力图。热力图可以将数据点在地图上以颜色编码的方式可视化&#x…

微软:警惕利用VMware ESXi进行身份验证绕过攻击

微软于7月29日发布警告,称勒索软件团伙正在积极利用 VMware ESXi 身份验证绕过漏洞进行攻击。 该漏洞被追踪为 CVE-2024-37085,由微软安全研究人员 Edan Zwick、Danielle Kuznets Nohi 和 Meitar Pinto 发现,并在 6 月 25 日发布的 ESXi 8.0 …

如何学习自动化测试工具!

要学习和掌握自动化测试工具的使用方法,可以按照以下步骤进行: 一、明确学习目标 首先,需要明确你想要学习哪种自动化测试工具。自动化测试工具种类繁多,包括但不限于Selenium、Appium、JMeter、Postman、Robot Framework等&…

docker环境安装kafka/Flink/clickhouse镜像

1、安装Kafka服务 1、将一下三个tar文件复制到ubuntu指定目录下 2、进入到/home/cl/app目录,使用docker命令加载tar镜像文件 # cd /home/cl/app # docker load -i kafka.tar # docker load -i kafka-manager.tar # docker load -i kafka-zookeeper.tar3、查看d…

分布式:RocketMQ/Kafka总结(附下载链接)

文章目录 下载链接思维导图 本文总结的是关于消息队列的常见知识总结。消息队列和分布式系统息息相关,因此这里就将消息队列放到分布式中一并进行处理关联 下载链接 链接: https://pan.baidu.com/s/1hRTh7rSesikisgRUO2GBpA?pwdutgp 提取码: utgp 思维导图

web学习笔记(八十三)git

目录 1.Git的基本概念 2.gitee常用的命令 3.解决两个人操作不同文件造成的冲突 4.解决两个人操作同一个文件造成的冲突 1.Git的基本概念 git是一种管理代码的方式,广泛用于软件开发和版本管理。我们通常使用gitee(码云)来云管理代码。 …

《Linux运维总结:基于x86_64架构CPU使用docker-compose一键离线部署zookeeper 3.8.4容器版分布式集群》

总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:《Linux运维篇:Linux系统运维指南》 一、部署背景 由于业务系统的特殊性,我们需要面对不同的客户部署业务系统&#xff0…

前端如何实现更换项目主题色的功能?

1、场景 有一个换主题色的功能,如下图: 切换颜色后,将对页面所有部分的色值进行重新设置,符合最新的主题色。 2、实现思路 因为色值比较灵活,可以任意选取,所以最好的实现方式是,根据设置的…

全面整理人工智能(AI)学习路线图及资源推荐

在人工智能(AI)飞速发展的今天,掌握AI技术已经成为了许多高校研究者和职场人士的必备技能。从深度学习到强化学习,从大模型训练到实际应用,AI技术的广度和深度不断拓展。作为一名AI学习者,面对浩瀚的知识海…

递归方法清空多维数组中的null元素(对象)

源码 //【递归】说明:递归方法清空多维数组中的null元素(对象) let clearNullElementsInArray (arr) > {return (arr || []).filter(v > {if (v null) {return false;} else {if (v.children) {v.children clearNullElementsInArra…

【C语言】Linux 飞翔的小鸟

【C语言】Linux 飞翔的小鸟 零、环境部署 安装Ncurses库 sudo apt-get install libncurses5-dev壹、编写代码 代码如下&#xff1a; bird.c #include<stdio.h> #include<time.h> #include<stdlib.h> #include<signal.h> #include<curses.h>…

科普文:Linux目录详解

在 Linux/Unix 操作系统中&#xff0c;一切都是文件&#xff0c;甚至目录也是文件&#xff0c;文件是文件&#xff0c;鼠标、键盘、打印机等设备也是文件。 这篇文章&#xff0c;我们将一起学习 Linux 中的目录结构及文件。 Linux 的文件类型 Linux系统中的文件系统&#xf…

【初阶数据结构】11.排序(2)

文章目录 2.3 交换排序2.3.1 冒泡排序2.3.2 快速排序2.3.2.1 hoare版本2.3.2.2 挖坑法2.3.2.3 lomuto前后指针2.3.2.4 非递归版本 2.4 归并排序2.5 测试代码&#xff1a;排序性能对比2.6 非比较排序2.6.1 计数排序 3.排序算法复杂度及稳定性分析 2.3 交换排序 交换排序基本思想…

【包邮送书】码农职场:IT人求职就业手册

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

遗传算法与深度学习实战——进化深度学习

遗传算法与深度学习实战——进化深度学习 0. 前言1. 进化深度学习1.1 进化深度学习简介1.2 进化计算简介 2. 进化深度学习应用场景3. 深度学习优化3.1 优化网络体系结构 4. 通过自动机器学习进行优化4.1 自动机器学习简介4.2 AutoML 工具 5. 进化深度学习应用5.1 模型选择&…

鸿蒙开发——axios封装请求、拦截器

描述&#xff1a;接口用的是PHP&#xff0c;框架TP5 源码地址 链接&#xff1a;https://pan.quark.cn/s/a610610ca406 提取码&#xff1a;rbYX 请求登录 HttpUtil HttpApi 使用方法

Qt基础 | 主机信息查询 | QHostInfo的介绍和使用 | QNetworkInterface的介绍和使用

文章目录 一、Qt 网络模块介绍二、主机信息查询1.QHostlnfo 和 QNetworkInterface 类2.QHostlnfo 的使用2.1 获取本机主机名和 IP 地址2.2 查找主机的地址信息 3.QNetworkInterface 的使用 Qt 网络模块&#xff1a; Qt基础 | 主机信息查询 | QHostInfo的介绍和使用 | QNetworkI…

常见的jmeter面试题及答案

1、解释什么是JMeter? JMeter是一款Java开源工具&#xff0c; 用于性能负载测试。它旨在分析和衡量Web应用程序和各种服务的性能和负载功能行为。 2、说明JMeter的工作原理? JMeter就像一群将请求发送到目标服务器的用户-样。它收集来自目标服务器的响应以及其他统计数据&…

python爬虫【3】—— 爬虫反反爬

一、常见的反爬手段和解决方法 二、splash 介绍与安装 三、验证码识别 图片验证码的处理方案 手动输入(input) 这种方法仅限于登录一次就可持续使用的情况图像识别引擎解析 使用光学识别引擎处理图片中的数据&#xff0c;目前常用于图片数据提取&#xff0c;较少用于验证码…