find-code 插件整理

vite-react 中 find-code 插件的实现

前言

首先我们先需要了解一下 vite 插件的的原理和配置项，建议这边先了解一下：
https://blog.csdn.net/qq_37215621/article/details/131446048

实现原理

• 1. 定义插件名称
• 2. 插件执行顺序
• 3. 仅让他在开发环境执行
• 4. 在加载完所有配置项之后的 hook 中

  configResolved: 通过读取工具函数文件将工具函数内容写在指定文件路径

• 🔴 5. config 中优化 react-dom 元素

• 🔴 6. transform 通过 babel 中的 parseSync 将代码专为 ast，在 ast 中判断是否是 jsx 元素,如果是则根据这个 ast 中的 name 属性判断这个是什么标签——用于计算长度，计算给他哪个位置插入位置变量，一些是直接插入他的路径在标签中，一些是直接通过存储其他映射变量进行数组映射获取对应的位置，最后需要 return

• 🔴 7、configureServer 自定义服务中间键

  • 🟢 7.1 获取所有当前资源的路径，将上一步 hook 中存储的数组拿到即可

  • 🟢 7.2 判断当前是否可以使用 code 打开 vscode 可以使用 child_process.execSync 执行终端命令

  • 🟢 7.3 根据当前点击的标签发送请求，并携带参数，这边进行请求拦截，读取入参，在数组中映射对应的路径，在此执行终端命令 code + path ,即可打开 vscode 并打开对应的位置

可以参考： react-dev-inspector > locator js