Vue和React的运行时,校验引入包的上下文差异

背景

系统使用 webpack 5 模块联邦实现微前端,有关如何实现跨应用的代码共享,可参考 如何优雅的实现跨应用的代码共享 里的第三大点。

总之,这里是其他应用使用了某个应用共享出来的reg文件,引入方式为:

javascript 复制代码
import REG from 'Shared/utils/reg';

一、React运行时校验引入包错误

1. 基础配置文件

2. 场景分析

运行系统,不进入任何具体页面
场景1

test-page.tsx文件的具体代码内容

结果: 系统正常运行

场景2

test-page.tsx文件的具体代码内容

结果:

运行报错 ,且所有react页面都进不去

4.初步猜测(有待研究并进一步完善)

现象:只是在代码引入而未中使用的话也不会导致相关错误

个人猜测:

  1. 运行时会先校验所有页面的共享代码
  2. 不会校验所有共享代码的引入是否正确,而是校验是否能正常使用(所以就算引入了,但是没有使用的话,也不会报错)
  3. 若出现错误,可能终止了后续的路由注册,导致所有页面都进不去

二、Vue运行时校验引入包错误

结论:
  1. 只有进入具体页面时才会校验页面的引入包的路径是否正确(能否找到对应内容)
  2. 只要引入了,就算没有使用也会报错
  3. 只有进入某个具体页面时才会报错,不会影响其他页面
相关推荐
意法半导体STM3213 小时前
【官方原创】STM32H7双核芯片通过 STlink连接失败问题分析 LAT1654
开发语言·前端·javascript·stm32·单片机·嵌入式硬件
小王C语言13 小时前
【基础IO】————简单设计一下libc库
前端·数据结构·算法
雨雨雨雨雨别下啦13 小时前
Vue3——RabbitShopping
前端·javascript·vue.js
BumBle13 小时前
从声明式到命令式:Vue3 弹窗组件的工厂模式重构
前端
恋猫de小郭14 小时前
你的蓝牙设备可能正在泄漏你的隐私? Bluehood 如何追踪附近设备并做隐私分析
android·前端·ios
取名不易14 小时前
vue-drawer-board 简单的画图功能
前端
学习指针路上的小学渣14 小时前
JavaScript笔记
前端·javascript
取名不易14 小时前
在 nuxtjs中通过fabric.js实现画图功能
前端
冰珊孤雪15 小时前
Android Studio Panda革命性升级:内存诊断、构建标准化与AI调试全解析
android·前端
用户8061381665915 小时前
避免滥用“事件总线”
前端