@canvases/ifdef-loader/README.md

"A loader used to distinguish and manage the configurations of multiple projects. It utilizes the ifdef conditional compilation directive and clearly marks the configurations of different projects through comments, facilitating development and compilation

### **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    # 生成小程序代码
```