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. 只有进入某个具体页面时才会报错,不会影响其他页面
相关推荐
ljt272496066110 分钟前
Vue笔记--状态管理
前端·vue.js·笔记
Larru-Sun16 分钟前
Nginx + Vue Router 基础:SPA History 部署、反向代理与请求分流
运维·vue.js·nginx
benbenAItalk8 小时前
数字人口播视频的批量生产实践:素材规范、任务编排与质量验收
java·前端·音视频
2601_962885729 小时前
如何用 Python 扫描 A 股跳空缺口并统计缺口回补概率?
java·前端·python
西瓜太郎12349 小时前
Claude Code、Codex CLI、Gemini CLI 能否共用一枚 Key?先看协议选择矩阵
前端·api 网关·claude code·gemini cli·codex cli
陈随易11 小时前
在Finch用了62亿词元,我认为这是新一代Agent工具之神
前端·人工智能·后端
水域安全老周12 小时前
水趣钓鱼救生衣专利拆解:两级锁紧如何解决落水人衣分离
java·前端·网络
计算机魔术师12 小时前
Anthropic CEO突然喊踩刹车,OpenAI罕见力挺:AI这辆车不能只踩油门了
前端
wing9812 小时前
从codex转战workbuddy使用一周的感受
前端·人工智能·后端
Highcharts.js12 小时前
常见报错排雷指南2:导出失败的官方解法
javascript·react.js·ecmascript·highcharts·可视化图表·导出模块失败·导出服务