vite-plugin-jsx-v-if

一个支持 Vue 风格的 v-if/v-else-if/v-else 指令的 Vite 插件，用于在 JSX 中使用条件渲染。

功能特性

• ✅ 支持 .jsx 和 .tsx 文件
• ✅ 转换 v-if 为条件表达式
• ✅ 支持完整的条件链：v-if → v-else-if(s) → v-else
• ✅ 转换为标准 JSX 条件表达式（三元运算符）
• ✅ 保持其他属性不变
• ✅ 支持嵌套条件
• ✅ 类型安全（使用 TypeScript 编写）

安装

npm install vite-plugin-jsx-v-if --save-dev

使用方法

配置 Vite

在 vite.config.js 或 vite.config.ts 中配置插件：

// vite.config.js
import { defineConfig } from 'vite'
import vIfPlugin from 'jsx-v-if'

export default defineConfig({
  plugins: [vIfPlugin()]
})

在 JSX/TSX 中使用

function App() {
  const a = true
  const b = false
  return (
    <div>
      {/* 基本用法 */}
      <h1 v-if={a}>Hello World</h1>
      <p v-else>Default</p>
      
      {/* 完整条件链 */}
      <div v-if={a}>A</div>
      <div v-else-if={b}>B</div>
      <div v-else>C</div>
      
      {/* 嵌套条件 */}
      <div v-if={a}>
        <span v-if={b}>AB</span>
        <span v-else>AA</span>
      </div>
      
      {/* 保留其他属性 */}
      <button 
        v-if={a}
        className="btn"
        onClick={() => console.log('click')}
        disabled={false}
      >
        Click me
      </button>
      <span v-else className="text">Hidden</span>
    </div>
  )
}

转换结果

插件会将上述 JSX 代码转换为标准的 JSX 条件表达式：

function App() {
  const a = true
  const b = false
  return (
    <div>
      {/* 基本用法 */}
      {a ? <h1>Hello World</h1> : <p>Default</p>}
      
      {/* 完整条件链 */}
      {a ? <div>A</div> : b ? <div>B</div> : <div>C</div>}
      
      {/* 嵌套条件 */}
      {a ? <div>{b ? <span>AB</span> : <span>AA</span>}</div> : null}
      
      {/* 保留其他属性 */}
      {a ? <button className="btn" onClick={() => console.log('click')} disabled={false}>Click me</button> : <span className="text">Hidden</span>}
    </div>
  )
}

原理

1. Babel 转换：插件使用 Babel 进行 AST 操作，将带有 v-if/v-else-if/v-else 指令的 JSX 元素转换为条件表达式。
2. Vite 插件钩子：通过 transform 钩子在 Vite 构建过程中转换代码，在 esbuild 转换之前运行（enforce: "pre"）。
3. 条件链检测：自动检测相邻的条件元素，构建完整的条件链。
4. 三元运算符转换：将条件链转换为嵌套的三元运算符。

测试

本项目使用 Vitest 进行测试，包含 16 个测试用例，覆盖了各种使用场景：

• ✅ 基本 v-if 转换
• ✅ v-if + v-else 转换
• ✅ v-if + v-else-if + v-else 转换
• ✅ 多个 v-else-if 条件
• ✅ 嵌套条件
• ✅ 保留其他属性
• ✅ 非兄弟节点处理
• ✅ JSX 和 TSX 文件支持
• ✅ 非 JSX/TSX 文件不转换
• ✅ 复杂条件链

运行测试：

npm test

类型定义

插件包含完整的 TypeScript 类型定义，可以在 TSX 文件中获得良好的类型提示。

兼容性

• ✅ Vite 4.x/5.x
• ✅ React 17+/18+
• ✅ TypeScript 4.x/5.x
• ✅ Babel 7.x

注意事项

1. 兄弟节点要求：v-else-if 和 v-else 必须是 v-if 的直接兄弟节点，否则不会被转换。
2. 转换时机：插件在 Vite 构建过程中转换代码，不会影响编辑器的语法高亮和提示。
3. JSX Runtime：支持 automatic 和 classic JSX Runtime。
4. 性能影响：转换过程非常快，对构建性能影响很小。

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

相关项目

• vite
• babel
• vitarx