@canvases/ifdef-loader

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 风格的条件编译语法：

// #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

.cColor {
  color: #ffc400;

  /* #ifdef  APP-PLUS */
  background: #42b983;
  /* #elseif H5  */
  background: #0077ff;
  /* #else */
  background: red;
  /* #endif */
}

<!-- #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

npm install @canvases/ifdef-loader

---

2️⃣ 配置 Webpack

在 webpack.config.js 中添加 Loader 配置：

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 中添加不同平台的构建命令：

"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"
}

然后，你可以运行：

npm run serve:h5    # 运行 H5 代码
npm run build:h5    # 生成 H5 代码
npm run build:app   # 生成 App 代码
npm run build:wx    # 生成小程序代码