起因
入职后发现所在团队的项目内没有接入LocatorJS。
这种快速定位页面元素源代码位置的工具对于新人来说用处很大，所以我准备在团队的项目中接入 LocatorJS。
准备接入
我采用的是直接安装Chrome插件的形式，这种方式对于项目的改动比较少，LocatorJS官网可以直接下载此插件。安装完成以后，在本地运行React项目，打开浏览器即可在项目中尝试插件效果。
另外，项目中我们还需要加入@babel/plugin-transform-react-jsx-source 这个包。
浏览器插件安装完成，试用过程中发现项目中元素并没有挂载相关信息以供 LocatorJS 使用，明明已经安装完成了@babel/plugin-transform-react-jsx-source，fiber元素上却没有_debugSource。
问题探查
LocatorJS工作过程可以分成下面几步
-
识别点击的dom节点
-
通过dom节点找到fiber
-
拿到fiber上挂载的 _debugSource 源码位置信息
-
打开vscode，通过拿到的位置信息打开对应文件定位位置
所以，_debugSource没有挂载成功是阻塞 LocatorJS 工作的原因。
@babel/plugin-transform-react-jsx-source
打开babel官网，可以找到@babel/plugin-transform-react-jsx-source的介绍。咦，上面说@babel/plugin-transform-react-jsx-source已经包含在@babel/preset-react这个预设内，那是不是不需要重复安装@babel/plugin-transform-react-jsx-source？
@babel/preset-react
@babel/preset-react确实可以看到在runtime为classic的模式下，是包含@babel/plugin-transform-react-jsx-source。不过在v7.9.0版本以后，runtime为automatic模式下，会导致@babel/plugin-transform-react-jsx-source无法工作。
我们团队的项目中现在基本都是将@babel/preset-react的runtime设置为automatic，这样我们不必在jsx文件中显式引入React，babel会帮我们做这个工作。
问题解决
既然@babel/preset-react的runtime为automatic模式会跟@babel/plugin-transform-react-jsx-source冲突，那只要将将automatic改成classic，我们的问题好像就解决了。
如果@babel/preset-react的runtime改成classic，babel将不会在jsx文件中自动引入React类。我们需要排查项目中的每一个文件，需要手动补全每个文件中React的引入，做的事情好像不多，但是需要改动的文件很多，容易漏掉一些文件，所以我们希望能使用一些工具去进行一些自动化处理。
自动补全React引入，我写了一个babel plugin，不过在写完以后，发现已经有成熟的npm包了babel-plugin-auto-import-react，就当练习一下babel plugin喽。
如有问题，请随时联系我。