# uni-preprocess-loader

> 用于给H5的Vue项目提供Uniapp条件编译能力

Latest version **1.0.1** (published 2023-03-31) · ISC license · 0 weekly downloads

## Install

```sh
npm install uni-preprocess-loader
pnpm add uni-preprocess-loader
yarn add uni-preprocess-loader
bun add uni-preprocess-loader
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-03-31 |
| First published | 2023-03-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 24.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rick_ |

## Links

- npm: https://www.npmjs.com/package/uni-preprocess-loader
- npm.io page: https://npm.io/package/uni-preprocess-loader

## Dependencies (1)

- [xregexp](https://npm.io/package/xregexp.md) 3.1.0

## Recent versions

- 1.0.1 (latest) — 2023-03-31
- 1.0.6-beta.1 (beta) — 2023-03-20
- 1.0.0 — 2023-03-20

## README

# uni-preprocess-loader

> 用于给H5的Vue项目提供Uniapp条件编译能力

使用方法

1. 安装npm包

```bash
npm install uni-preprocess-loader
```

2. 在Vue.config.js中引入
```javascript
 chainWebpack: config => {
        require('uni-preprocess-loader/init')(config, {
            H5: process.env.PLATFORM === 'h5',
            'MP-WEIXIN': process.env.PLATFORM === 'mp-weixin',
            'MP-ALIPAY': process.env.PLATFORM === 'mp-alipay',
        });
    },
```

3. 添加环境变量 - 在package.json中修改script
```javascript
 script: {
    "dev:h5" : "PLATFORM=h5 vue-cli-service serve", 
    "dev:mp-weixin" : "PLATFORM=mp-weixin vue-cli-service serve", 
    //   ${环境} : 平台:  "PLATFORM=${平台}  .....其他你项目配置"
 }
```
4. vue SFC上使用
```html
<style>
    /* #ifdef MP */
        .page{ color:red; } 
    /* #endif */
</style>
<template> 
    <!-- #ifdef MP -->
        <div>只在mp生效</div>
    <!-- #endif -->
</template>

<script>
export default {
    create(){
        // #ifdef h5
        console.log("只会在h5打印")
        // #endif
    }
}
</script>
```
### 注意: 第三步如果在win下,设置环境变量请借助 cross-env
---
init文件参数
1. config: webpack-chain-config 链式webpackConfig
2. context: 条件编译的上下文,用于编译时判断当前环境

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