sybzVitePlugins Vite 插件预设

Hidden Title

基础用法：sybzVitePlugins()

基础用法

sybzVitePlugins() 默认同时启用 Vue JSX/TSX、Tailwind CSS v4、代码定位、Git 提交信息和打包时间。业务项目安装 @sybz-components/utils 后，不需要再单独安装或配置 @vitejs/plugin-vue-jsx、@tailwindcss/vite、code-inspector-plugin、vite-plugin-html。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { sybzVitePlugins } from '@sybz-components/utils/vite'

export default defineConfig({
  plugins: [vue(), sybzVitePlugins()],
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { sybzVitePlugins } from '@sybz-components/utils/vite'

export default defineConfig({
  plugins: [vue(), sybzVitePlugins()],
})

sybzVitePlugins() 内部包含多个插件，并自动向 HTML 注入 Tailwind CSS 样式入口。业务项目无需单独安装 tailwindcss 或在 CSS 中写 @import 'tailwindcss'。Vite 的 PluginOption 原生支持插件数组并会自动扁平化，因此直接放入 plugins，无需使用展开运算符。

预设当前支持 Vite 5 和 6。项目仍需自行安装并注册 @vitejs/plugin-vue。

代码统一规范为什么不放进 Vite 插件？

ESLint、Prettier、lint-staged 和 Husky 分别运行在编辑器、命令行、Git 提交和 CI 阶段，不属于 Vite 生命周期。把它们放进 sybzVitePlugins() 会导致只有启动或构建 Vite 时才生效。统一规则已由同一工具包的 @sybz-components/utils/codeStandard 集中提供，业务项目只需导入预设，升级工具包即可同步规则。

配置项

属性名称	类型	可选值	默认值	说明
`vueJsx`	`boolean \| VueJsxOptions`	`false/true/配置对象`	`true`	是否启用 Vue JSX/TSX，或传入插件配置。
`tailwind`	`boolean \| TailwindPluginOptions`	`false/true/配置对象`	`true`	是否启用 Tailwind CSS v4 插件。
`tailwindCss`	`boolean`	`false/true`	`true`	是否自动注入 Tailwind CSS 样式。
`codeInspector`	`boolean \| SybzCodeInspectorOptions`	`false/true/配置对象`	`true`	是否启用代码定位，或传入插件配置。
`gitCommitLog`	`boolean \| GitCommitLogOptions`	`false/true/配置对象`	`true`	是否启用 Git 信息，或传入插件配置。
`buildTime`	`boolean \| object`	`false/true/配置对象`	`true`	是否注入打包时间及其 meta 配置。

bundler 已固定为 vite，业务项目无需重复传入。

如果项目已自行注册 vueJsx()，请使用 sybzVitePlugins({ vueJsx: false })，避免重复注册。TSX 项目还需在 tsconfig.json 中设置 "jsx": "preserve" 和 "jsxImportSource": "vue"。

默认使用 VS Code 打开源码

codeInspector 默认使用 VS Code 打开定位到的源码，无需额外配置，等同于：

plugins: [
  sybzVitePlugins({
    vueJsx: {
      defineComponentName: ['defineComponent'],
    },
    codeInspector: {
      editor: 'code',
    },
  }),
]

plugins: [
  sybzVitePlugins({
    vueJsx: {
      defineComponentName: ['defineComponent'],
    },
    codeInspector: {
      editor: 'code',
    },
  }),
]

属性名称	可选值	默认值	说明
`editor`	`code`、`cursor`、`webstorm` 等受支持的编辑器	`code`	打开源码使用的编辑器

其他编辑器的配置可查看 code-inspector IDE 配置列表。

项目只保留一个 Tailwind Vite 插件和一个 Tailwind CSS 入口。若项目已有手动的 @import 'tailwindcss'，请设置 tailwindCss: false，避免重复注入；若已自行注册 @tailwindcss/vite，请关闭预设中的 Tailwind：

plugins: [tailwindcss(), sybzVitePlugins({ tailwind: false })]

plugins: [tailwindcss(), sybzVitePlugins({ tailwind: false })]

查看打包时间

默认会在 HTML 头部注入：

html

<meta name="buildTime" content="2026-08-16 08:30:00" />

<meta name="buildTime" content="2026-08-16 08:30:00" />

可以从 meta 或全局变量读取：

const metaBuildTime = document.querySelector<HTMLMetaElement>('meta[name="buildTime"]')?.content
const globalBuildTime = window.__SYBZ_BUILD_TIME__

const metaBuildTime = document.querySelector<HTMLMetaElement>('meta[name="buildTime"]')?.content
const globalBuildTime = window.__SYBZ_BUILD_TIME__

不需要打包时间时可关闭：

plugins: [sybzVitePlugins({ buildTime: false })]

plugins: [sybzVitePlugins({ buildTime: false })]

自定义配置

plugins: [
  sybzVitePlugins({
    codeInspector: {
      needEnvInspector: true,
    },
    gitCommitLog: {
      autoPrint: true,
      expanded: false,
      defaultLimit: 10,
    },
    buildTime: {
      metaName: 'buildTime',
    },
    tailwind: {
      optimize: true,
    },
  }),
]

plugins: [
  sybzVitePlugins({
    codeInspector: {
      needEnvInspector: true,
    },
    gitCommitLog: {
      autoPrint: true,
      expanded: false,
      defaultLimit: 10,
    },
    buildTime: {
      metaName: 'buildTime',
    },
    tailwind: {
      optimize: true,
    },
  }),
]

按需关闭

// 只启用代码定位
plugins: [sybzVitePlugins({ gitCommitLog: false })]

// 使用项目自行注册的 Vue JSX 插件
plugins: [vueJsx(), sybzVitePlugins({ vueJsx: false })]

// 只启用 Git 提交信息
plugins: [sybzVitePlugins({ codeInspector: false })]

// 使用项目自行配置的 Tailwind 插件
plugins: [tailwindcss(), sybzVitePlugins({ tailwind: false })]

// 只启用代码定位
plugins: [sybzVitePlugins({ gitCommitLog: false })]

// 使用项目自行注册的 Vue JSX 插件
plugins: [vueJsx(), sybzVitePlugins({ vueJsx: false })]

// 只启用 Git 提交信息
plugins: [sybzVitePlugins({ codeInspector: false })]

// 使用项目自行配置的 Tailwind 插件
plugins: [tailwindcss(), sybzVitePlugins({ tailwind: false })]

函数源码

sybzVitePlugins

来源：packages/utils/src/vite.ts

/**
 * 创建 sybz 项目的 Vite 插件预设，默认包含 Vue JSX/TSX、Tailwind CSS v4、代码定位、Git 提交信息和打包时间。
 * Vite 会自动扁平化插件数组，推荐直接写入 plugins，无需展开运算符。
 */
export const sybzVitePlugins = (options: SybzVitePluginsOptions = {}): PluginOption => {
  const plugins: Plugin[] = []

  if (options.vueJsx !== false) {
    plugins.push(vueJsx(typeof options.vueJsx === 'object' ? options.vueJsx : {}))
  }

  if (options.tailwind !== false) {
    plugins.push(...tailwindcss(typeof options.tailwind === 'object' ? options.tailwind : {}))
    if (options.tailwindCss !== false) plugins.push(createTailwindEntry())
  }

  if (options.codeInspector !== false) {
    plugins.push(createCodeInspector(typeof options.codeInspector === 'object' ? options.codeInspector : {}))
  }

  if (options.gitCommitLog !== false) {
    plugins.push(gitCommitLog(typeof options.gitCommitLog === 'object' ? options.gitCommitLog : {}))
  }

  if (options.buildTime !== false) {
    plugins.push(createBuildTime(typeof options.buildTime === 'object' ? options.buildTime.metaName : undefined))
  }

  return plugins
}

sybzVitePlugins Vite 插件预设 ​

Hidden Title ​

基础用法 ​

配置项 ​

默认使用 VS Code 打开源码 ​

查看打包时间 ​

自定义配置 ​

按需关闭 ​