## kimi-plugin-inspect-react 轻量的 Vite 插件,用于在 React 组件渲染的 DOM 上写入源码位置信息,便于在浏览器里定位到对应的文件和行列。 ### 安装 ```bash pnpm add kimi-plugin-inspect-react -D # 或 npm/yarn 均可 ``` ### 使用 ```ts import { defineConfig } from 'vite' import { inspectAttr, inspectDom } from 'kimi-plugin-inspect-react' export default defineConfig({ plugins: [ // 方式一:直接在 JSX 上插入 code-path 属性 inspectAttr(), // 方式二:通过 ref 在真实 DOM 上写入 $codePath 属性 // inspectDom(), ], }) ``` 默认仅在 `vite serve` 生效(`apply: "serve"`),构建时不会影响产物。 ### 导出 - `import { inspectAttr } from 'kimi-plugin-inspect-react'` - `import { inspectDom } from 'kimi-plugin-inspect-react/inspectDom'` 支持 ESM `.mjs` 与 CJS `.cjs`,并提供类型声明。 ### 本地开发与构建 ```bash pnpm install pnpm run build ``` 产物输出到 `dist/`,包括: - `inspectAttr.mjs` / `inspectAttr.cjs` 及类型声明 - `inspectDom.mjs` / `inspectDom.cjs` 及类型声明 ### 版权与许可 本项目基于以下开源项目改进而来(保留原声明): - @namnode/vite-plugin-inspect-react (MIT License - Copyright (c) 2024 Nam Nguyen) - vite-plugin-react-inspector (MIT License) 本项目同样以 MIT License 授权。