Vite-plugin-conditional-compile NPM

功能特性

支持根据自定义的条件配置选择性地包含或排除代码块
可以在开发环境和生产环境中使用不同的代码逻辑
灵活的条件表达式，支持逻辑运算和环境变量
可以在 Vite 构建过程中动态生成不同的输出文件

安装

yarn add vite-plugin-conditional-compile -D

使用

务必将该插件的加载顺序放在最前位，防止 jsx 之类的代码被其他插件编译，导致本插件无法解析

// vite.config.ts
import { defineConfig } from "vite";
import vitePluginConditionalCompile from "vite-plugin-conditional-compile";

export default defineConfig({
    plugins: [vitePluginConditionalCompile({
      // 插件配置项...
    }),
    // 其他插件...
  ],
});

配置项

该插件支持以下配置项：

include: string | RegExp | readonly (string | RegExp)[] | null 需要进行条件编译的文件路径或文件匹配模式。
默认值: ['**/*']
示例：
```
   {
     include: [/^.+\/packages\/.+\/.+.(ts|tsx)$/],
   }
```
exclude: string | RegExp | readonly (string | RegExp)[] | null 需要排除条件编译的文件路径或文件匹配模式。
默认值: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/]
示例：
```
   {
      exclude: ['/\.eslintrc.js/']
   }
```
env: Record<string, any> 自定义环境变量选项，用于在条件编译语句中使用自定义的环境变量。示例：
```
{
  'MY_VARIABLE': 'my value',
  // 更多自定义环境变量...
}
```
同时，本插件会调用 vite 提供的 loadEnv 来获取项目的环境变量。

示例

// vite.config.ts
import { defineConfig } from "vite";
import vitePluginConditionalCompile from "vite-plugin-conditional-compile";

export default defineConfig({
    plugins: [vitePluginConditionalCompile({
      env:{
        //自定义环境变量, 提供给条件语句使用
        feature: 'code',
        prod_version: 'vite'
      }
    }),
  ],
});


// main.jsx
// #if [DEV]
import { featureA } from './featureA.js';

// 这里的 PROD 取至 项目的环境变量, 若当前为生产环境时将加载此条 import 语句
// #elif [PROD]
import { featureB } from './featureB.js';

//这里的 feature 和 prod_version 取至用户的 env 配置项, 判断 feature 的值是否与 ”code“ 相同、prod_version的值是否不等于 ”vite“. 当满足其中之一时, 该条件成立
// #elif [feature=code || !(prod_version=vite)]
import { featureC } from './featureC.js';

// #else
import { featureD } from './featureD.js';

// #endif

// #if [DEV]
console.log('Development environment');
// #endif

// #if [PROD]
console.log('Production environment');
// #endif

// #if [!!API_URL]
fetch(import.meta.env.API_URL)
  .then(response => response.json())
  .then(data => console.log(data));
// #endif

const Com = () => {
return (
    <div>
      {/* #if [PROD] */}
      <span>prod mode</span>
      {/* #elif [DEV] */}
      <span>dev mode</span>
      {/*#else */}
      <span>unknown mode</span>
      {/* #endif */}
    </div>
  );
}

<script setup lang="ts">
// #if [DEV]
import { featureA } from './featureA.js';
// #endif

</script>

<template>

  <!-- #if [DEV] -->
  <router-link to="/debug">
    <span class="m-2 text-green-500">demo</span>
  </router-link>

  <!-- #elif [PROD] -->
 <router-link to="/prod">
    <span class="m-2 text-green-500">demo</span>
  </router-link>

  <!-- #else -->
  <router-link to="/helloWorld">
    <span class="text-green-500">helloWorld</span>
  </router-link>
  <!-- #endif -->

  <router-view />
</template>