React 项目使用 babel-plugin-jsxFileAttribut 在 DOM 记录组件的位置信息

背景：维护react项目, 由于项目大量使用了 render props，并且新人维护项目，存在大量组件不知道是哪个文件渲染的。对此，开发 babel-plugin-jsxFileAttribut 插件在 dev 模式开启并且在 dom 信息显示组件信息。此插件完成工作大概在一年半前，因为离职换工作，现在开源出来。有好的坑，内推我😊

前端开发同学在工作时需要通过浏览器查看页面DOM对应的组件位置信息，很多时候我们都是找到对应的 className 或者文字关键字去vscode 搜索，进而找到需要改动的组件位置信息
开启该插件，可以在控制面板快速查看该DOM对应的组件信息 (组件名字 & 当前 DOM 行列信息)
或者一个同学突然接到一个新需求，要求去改不熟悉的代码，此时这位同学就会通过className 或者文字关键字去vscode 搜索，进而找到需要改动的组件位置信息
通过关键字去 vscode 搜索找到信息，有时候可能会搜到多处，我们会搞不清到底哪一处是我们需要改的
现在通过编译时，对 react 项目进行 ast 注入，会在渲染时携带该 DOM 的位置信息 (包括组件所在的位置，该 DOM 所在的行信息)
以下配置只限于在 dev 环境开启 (prod 开启问题也不大，就是显得不太专业，就像 sorcemap 暴露出去意义，显得不专业)
开启下面配置之后，在浏览器找到对应需要修改的DOM，复制其位置，在vscode 使用 command + p 直接粘贴进去，找到对应的位置即可修改。
使用效果参考这篇文章, 通过结合自定义的 loader 或者 plugin，实现了点击页面元素唤起 vscode
仓库地址，欢迎 star

效果：

选中DOM信息中的 data-awakeide 的值并且复制，直接 command + P，值贴入 vscode 即可打开当前被渲染DOM对用组件的行列信息 (精确到某一个文件某一行某一列)，不需要在通过 className 反找组件。

支持单体项目，也支持 monorepo 项目

如何接入：

// .babelrc.js 或者 babel.config.js

const isDev = process.env.NODE_ENV === 'development';
const plugins = isDev
  ? [
      ...,
      ['babel-plugin-jsxfileattribute', { userSetPwd: 'platform-web-ui' }]
      ...,
    ]
  : [...];

module.exports = {
  presets: ....,
  plugins,
};

配置：

babel-plugin-jsxFileAttribut 只支持react 项目，有几个默认属性 isShowAwakeIdeMsg、onlyShowAwakeIdeMsg、showCompleteFilePath、exclude、userSetPwd
exclude 表示排除哪些标签不需要经过此插件进行 AST 操作
userSetPwd 设置此字段含义: 支持 monorepo 仓库项目
isShowAwakeIdeMsg 默认是true，用户传入的 isShowAwakeIdeMsg 可以覆盖默认的 true。该字段表示是否在 DOM 中追加 data-awakeIde。 data-awakeIde 表示当前渲染的 DOM 所在的组件具体某一个文件的某一行某一列。
onlyShowAwakeIdeMsg 默认是true，控制展示在 DOM 里面的信息。该字段表示是否在 DOM 中追加 data-line、data-render-file-name。data-render-file-name 表示当前 DOM 所在的组件 file 位置信息，data-line 表示当前 DOM 所在的组件具体哪一行。
showCompleteFilePath 默认是 false, 该属性表示组件完整的 file path，使用详情参考这篇文章
注意：onlyShowAwakeIdeMsg 默认传入 true，注入在 DOM 里只会存在 data-awakeIde 信息，data-render-file-name、data-line 均不展示。

React 项目 使用 babel-plugin-jsxFileAttribut 在 DOM 记录组件的位置信息

效果：

如何接入：

配置：

React 项目使用 babel-plugin-jsxFileAttribut 在 DOM 记录组件的位置信息