New Feature

Support condition inline.

First, config env variable, in file: "/.env.development"

VITE_TEST=true

Then, in *.vue file:

// example 1
const isTest = /* v-ifdef VITE_TEST=true */ true /* v-else */ false /* v-endif */;

// example 2
const myFunction = /* v-ifdef VITE_TEST */ async /* v-endif */ () => {
  /* v-ifdef VITE_TEST */ await doSomeTestThings(); /* v-endif */
  doOtherThings();
};

Installation

pnpm i -D vite-plugin-conditional-compiler-ex

Usage

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

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

Syntax

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

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

Warning The #v-ifndef is deprecated in the next version, maybe :)

Configuration

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

Other Example

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

/* Compile in red except for development environments, otherwise white */
.code {
  /* #v-ifndef DEV */
  color: red;
  /* #v-else */
  color: white;
  /* #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": "#666",
  "strikethrough": false,
  "underline": false,
  "bold": true,
  "italic": false
}