56 lines
1.4 KiB
Markdown
56 lines
1.4 KiB
Markdown
## 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 授权。
|