@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 阶段传入的源码。

插件生成的组件标记使用安全守卫，可兼容 TanStack Router 自动路由拆包。路由组件被 移动到 split 模块后，reference 模块不会因为残留组件标记而抛出 ReferenceError。