@qmuse/component-tagger-vite-plugin

Vite 版本的 QMuse component tagger 插件，用于在开发模式下为 React JSX/TSX 代码注入组件和元素源码标记。

安装

npm install @qmuse/component-tagger-vite-plugin

使用

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import componentTaggerVitePlugin from '@qmuse/component-tagger-vite-plugin';

export default defineConfig({
  plugins: [componentTaggerVitePlugin(), react()],
});

默认只在 Vite dev server 下生效。如果需要在 build 时也注入标记：

componentTaggerVitePlugin({
  onlyDev: false,
});

选项

componentTaggerVitePlugin({
  onlyDev: true,
  include: /src\/.*\.[jt]sx?$/,
  exclude: /node_modules/,
  sourceMode: 'file',
});

• onlyDev: 默认 true，只在 vite serve 或 development mode 注入。
• include: 可选，额外限制需要处理的文件。
• exclude: 可选，排除不需要处理的文件。
• sourceMode: 默认 file，从磁盘原始源码打标，保证行列信息与实际源码一致；设为 transform 时使用 Vite 传入的 transform source。

插件的 transform hook 会以 pre 顺序执行，用于兼容 TanStack Router 这类会生成 query 模块的插件；即使插件数组顺序不同，打标也会尽量先基于原始模块执行。