### **README: UniApp 条件编译 Loader for Webpack + Vue2**

本项目提供了一个 Webpack Loader，用于在 Vue2 项目中模拟 **UniApp** 的条件编译功能。它允许你在 Web 和不同平台（如 `APP-PLUS`、`H5`、`MP-WEIXIN` 等）之间切换不同的业务代码。

---

## **📌 功能特点**
✅ **支持 `#ifdef` / `#ifndef` 条件编译**，根据 `platform` 变量选择代码块。  
✅ **支持 `#elseif` / `#else`**，确保只有一个分支生效。  
✅ **支持 `||` 逻辑运算**，如 `APP-PLUS || H5`。  
✅ **适用于 Webpack + Vue2 项目**，可在**运行**和**打包**时自动处理条件编译。

---

## **📂 使用示例**

在 Vue2 组件或 JavaScript 代码中，你可以使用 UniApp 风格的条件编译语法：

```js
// #ifdef APP-PLUS
console.log('This is for APP-PLUS');
// #elseif H5
console.log('This is for H5');
// #else
console.log('This is for other platforms');
// #endif
```


``` css
.cColor {
  color: #ffc400;

  /* #ifdef  APP-PLUS */
  background: #42b983;
  /* #elseif H5  */
  background: #0077ff;
  /* #else */
  background: red;
  /* #endif */
}
```
```html
<!-- #ifdef APP-PLUS -->
<div class="XAM-only">if APP-PLUS平台显示</div>
<!--  #elseif  H5 || MP-WEIXIN  -->
<div class="app-only">elseif MP-WEIXIN || H5 平台显示</div>
<!--  #else -->
<div class="app-only">else 平台显示</div>
<!-- #endif -->
```

---

## **⚙ 安装与配置**

### **1️⃣ 安装 Loader**
```sh
npm install @canvases/ifdef-loader
```

---

### **2️⃣ 配置 Webpack**
在 `webpack.config.js` 中添加 Loader 配置：

```js
module.exports = {
  module: {
    rules: [
        // 处理 Vue 文件
        {
            test: /\.vue$/,
            use: [

                {
                    loader: '@canvases/ifdef-loader',
                    options: { platform: process.env.PLATFORM } // 注入环境变量
                }
            ]
        },
        // 处理 JS 文件
        {
            test: /\.js$/,
            use: [

                {
                    loader: '@canvases/ifdef-loader',
                    options: { platform: process.env.PLATFORM } // 注入环境变量
                }
            ]
        },
        // 处理 CSS/SCSS 文件
        {
            test: /\.(css|scss)$/,
            use: [

                {
                    loader: '@canvases/ifdef-loader',
                    options: { platform: process.env.PLATFORM } // 注入环境变量
                }
        }
    ]
  }
};
```

在 `package.json` 中添加不同平台的构建命令：

```json
"scripts": {
  "serve:h5": "cross-env PLATFORM=H5 vue-cli-service serve",
  "build:h5": "cross-env PLATFORM=H5 webpack --mode production",
  "build:app": "cross-env PLATFORM=APP-PLUS webpack --mode production",
  "build:wx": "cross-env PLATFORM=MP-WEIXIN webpack --mode production"
}
```

然后，你可以运行：
```sh
npm run serve:h5    # 运行 H5 代码
npm run build:h5    # 生成 H5 代码
npm run build:app   # 生成 App 代码
npm run build:wx    # 生成小程序代码
```