vite-react 中 find-code 插件的实现
前言
首先我们先需要了解一下 vite 插件的的原理和配置项,建议这边先了解一下:
https://blog.csdn.net/qq_37215621/article/details/131446048
实现原理
-
- 定义插件名称
-
- 插件执行顺序
-
- 仅让他在开发环境执行
-
- 在加载完所有配置项之后的 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