code-inspect-plugin-react

Webpack（ts-loader）或 Vite 下为 JSX/TSX 自动注入 data-insp-path（项目根相对路径 + 行号），便于从页面 DOM 溯源到源码。

安装

npm i code-inspect-plugin-react -D

构建（与 code-inspect-plugin-react 一致）

源码在 src/，发布物在 dist/：

npm run build

使用 tsc -p tsconfig.build.json，并对 ts-loader-bootstrap 单独 esbuild 产出 dist/ts-loader-bootstrap.cjs（供 thread-loader 场景按路径加载）。

本地 file: 依赖与 node_modules 里为什么有 src/

package.json 的 files 已限定发布物为 dist/ 与 README.md（npm pack 仅包含这些 + package.json）。

若宿主使用 file:../code-inspect-plugin-react，npm 默认会软链整个本地目录，因此会看到 src/、package-lock.json 等——不是打进包里，而是链到仓库根目录。

在宿主 .npmrc 中设置 install-links=true，npm 会先 npm pack 再解压安装，node_modules 内只保留与发布一致的内容（需先在插件目录执行 npm run build 保证存在 dist/）。

Vite

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { createCodeInspectorPluginReact } from 'code-inspect-plugin-react';

export default defineConfig({
	plugins: [createCodeInspectorPluginReact({ bundler: 'vt' }), react()],
});

Webpack

const { CodeInspectorPluginReact } = require('code-inspect-plugin-react');

module.exports = {
	plugins: [new CodeInspectorPluginReact()],
};

或使用工厂（等价）：

const { createCodeInspectorPluginReact } = require('code-inspect-plugin-react');

module.exports = {
	plugins: [createCodeInspectorPluginReact({ bundler: 'wp' })],
};

（本包为 type: module，若配置仍为 CJS，请使用 createRequire 或改为 import()。）