zthxxx / react-dev-inspector

jump to local IDE code directly from browser React component by just a simple click
https://react-dev-inspector.zthxxx.me
MIT License
1.15k stars 68 forks source link

微前端里使用失效 #93

Closed Nuyoah-ll closed 5 months ago

Nuyoah-ll commented 2 years ago

qiankun结合react-dev-inspector,在主域中点击子项目的组件,不能打开vscode,不能自动定位组件所在代码。 但是如果单独打开子项目,点击组件,可以自定定位到所在代码。 有什么解决办法吗

zthxxx commented 2 years ago

@Nuyoah-ll 请给一个最小能复现的仓库

lzzhy commented 2 years ago

@Nuyoah-ll 请问有解决吗?我也遇到这种情况

zthxxx commented 2 years ago

@lzzhy 请给一个最小能复现的仓库

HaishengLiang commented 2 years ago

@Nuyoah-ll 请问有解决吗?我也遇到这种情况

你是配置在子工程中还是主工程里的? 按照设计, 插件应该配置给子工程, 配置到主工程无法生效

zthxxx commented 5 months ago

在微前端中使用,并且希望在主项目中启动也能定位子项目组件的话,

<Inspector/> 组件放在主项目中,且子项目使用 @babel/preset-react 配置 development 参数来给子项目组件添加源码绝对路径信息,(而非使用 @react-dev-inspector/babel-plugin 添加相对路径),

这样主项目中打开可以正常定位和跳转子项目组件位置。

babel plugin 对比描述见文档: https://react-dev-inspector.zthxxx.me/docs/compiler-plugin#babel

最近在做的项目也是这样的场景,我的使用方式也和上面说的一样。