vite-plugin-conditional-compiler

Conditional compilation syntax based on environment variables

English | 简体中文

Important From v0.2.0, this plugin is essentially an wrapper of unplugin-preprocessor-directives.

Installation

pnpm i -D vite-plugin-conditional-compiler

Usage

// vite.config.ts
import { defineConfig } from "vite";
import ConditionalCompile from "vite-plugin-conditional-compiler";

export default defineConfig({
  plugins: [ConditionalCompile()],
});

Syntax

Start with #v-ifdef, then append %ENV%, end with #v-endif, you can also use #v-elif and #v-else.

• #v-ifdef: if defined
• %ENV% Vite environment variables

Warning The #v-ifndef is deprecated in the v0.2.0 version

Configuration

export interface Options {
  /**
   * @default ["**/*"]
   */
  include: FilterPattern;
  /**
   * @default []
   */
  exclude: FilterPattern;
}

Examples

// Compile in production environment only
// #v-ifdef PROD
value = 1;
// #v-endif

// Condition or, not supported &&
// Compile in production or development
// #v-ifdef PROD||DEV
value = 1;
// #v-endif

// Allow custom environment variables
// Compile only when 'VITE_MY_ENV' exists and is not false
// #v-ifdef VITE_MY_ENV
value = 1;
// #v-endif

// Allow specified values
// Compile only when 'VITE_MY_ENV' exists and is not equal to hi
// #v-ifdef VITE_MY_ENV!='hi'
value = 1;
// #v-endif

Other

With the better-comments plugin in VsCode, syntax can be highlighted

{
  "tag": "#v",
  "color": "#fff",
  "strikethrough": false,
  "underline": false,
  "backgroundColor": "#0000ff",
  "bold": true,
  "italic": false
}