vite-plugin-condition-compile

基于注释指令的条件编译 Vite 插件，类似 #if / #else / #endif 的预处理模式。

安装

npm install vite-plugin-condition-compile

使用

// vite.config.ts
import { conditionCompile } from 'vite-plugin-condition-compile'

export default defineConfig({
  plugins: [
    conditionCompile({
      conditions: { DEBUG: true, VERSION: '2.0' },
      exts: ['vue', 'js', 'ts', 'jsx', 'tsx'],
      errorPass: false,
    }),
  ],
})

配置

type Config = {
  conditions: Record<string, boolean>  // 条件定义
  exts: string[]                       // 处理的文件扩展名
  errorPass: boolean                   // true=跳过错误继续编译, false=抛出错误终止
}

指令语法

// @if DEBUG
console.log('仅在 DEBUG 模式下编译')
// @endif

// @if FEATURE_A
console.log('FEATURE_A 启用')
// @else
console.log('FEATURE_A 未启用')
// @endif

| 指令 | 说明 | |---|---| | // @if <条件> | 开启条件块，条件匹配则保留代码 | | // @else | 可选，条件不匹配时保留此分支 | | // @endif | 关闭条件块 |

规则

• 指令必须写在 // 注释中，@if 后跟条件名
• 不支持嵌套 @if
• 一个 @if 块内最多一个 @else
• 严格模式下（errorPass: false）：
  • 未定义的条件名 → 报错
  • @else / @endif 前缺少 @if → 报错
  • 重复 @else → 报错
  • 格式错误的指令 → 报错
  • 文件末尾未关闭的块 → 报错
• 宽松模式下（errorPass: true）：遇到错误静默跳过，尽量输出结果

示例

// @if DEBUG
console.log('debug:', data)
// @endif

// @if PLATFORM_WX
const api = wx.request
// @else
const api = fetch
// @endif

条件 { DEBUG: false, PLATFORM_WX: true } 编译结果：

const api = wx.request