# vite-preprocess

> vite条件编译工具

Latest version **1.1.2** (published 2023-01-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-preprocess
pnpm add vite-preprocess
yarn add vite-preprocess
bun add vite-preprocess
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2023-01-28 |
| First published | 2023-01-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xwb |
| Maintainers | xwb |
| Keywords | preprocess for rollup, conditional compilation, tmplate compilation |

## Links

- npm: https://www.npmjs.com/package/vite-preprocess
- Homepage: https://github.com/xu1260114313/vite-preprocess
- Issues: https://github.com/xu1260114313/vite-preprocess/issues
- npm.io page: https://npm.io/package/vite-preprocess

## Dependencies (2)

- [preprocess](https://npm.io/package/preprocess.md) ^3.2.0
- [@vue/compiler-sfc](https://npm.io/package/@vue/compiler-sfc.md) ^3.2.45

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2023-01-28
- 1.1.1 — 2023-01-28
- 1.1.0 — 2023-01-27
- 1.0.0 — 2023-01-27

## README

## vite-preprocess

### Introduction

`vite-preprocess-loader`支持vue项目中使用条件编译功能.

条件编译支持：
```
@ifdef 变量名
  code...
@endif
```
```
@ifndef 变量名
  code...
@endif
```

### Example
```
<script setup lang="ts">
// @ifdef web
console.log('hello world!')
// @endif
</script>
<template>
    <div class="wrapper">
      <!-- @ifdef web -->
      <h1>web</h1>
      <!-- @endif -->
      <!-- @ifndef web -->
      <h1>not web</h1>
      <!-- @endif -->
    </div>
</template>

<style scoped>
.wrapper {
  line-height: 1.5;
  max-height: 100vh;
  /* @ifdef web */
  color: red;
  /* @endif */
  /* @ifdef h5 */
  font-size: 100px;
  font-weight: bold;
  /* @endif */
}
</style>
```

### Install

```
npm install vite-preprocess
```

### Usage

需要在项目运行的时候添加临时node的环境变量`platform`

```
vite.config.ts
import vitePreprocess from 'vite-preprocess'

export default defineConfig({
  plugins: [vitePreprocess(), vue()],
  // esbuild: false, // esbuild默认过滤注释内容
  esbuild: {
    legalComments: 'none', // * 一定要设置'legalComments: none'或者 'esbuild: false' ,不用esbuild处理注释内容.
  }
})
```

```
package.json
"scripts": {
    "serve": "cross-env platform=h5 vite"
}
```
### All directives
```
@ifdef 变量 /@endif 包括定义其中的代码块
@ifndef 变量 /@endif 不包括其中定义的代码块
```

---
_Source: https://npm.io/package/vite-preprocess · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._