@canvases/ifcomp-config-loader v1.0.0

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

本项目提供了一个 Webpack Loader，用于在 Vue2 项目中进行条件编译功能。它允许你在 Web 和不同平台（如 APP-PLUS、H5、MP-WEIXIN 等）之间运用不同的业务组件。

📌 功能特点

✅ 支持 #ifcomp 条件编译，根据 platform 变量选择代码块。 ✅ 适用于 Webpack + Vue2 项目，可在运行和打包时自动处理条件编译。

📂 使用示例

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

// #ifcomp  hellowrod
console.log('This is for hellowrod component');
// #endif

⚙ 安装与配置

1️⃣ 安装 Loader

你可以直接在项目中创建 conditional-loader.js，或者发布为 npm 包后安装：

npm install your-loader-name

2️⃣ 配置 Webpack

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use:{
            loader: './plugins/module-condition-loader.js',
            options: { platform: process.env.PLATFORM,
                entryJson: path.resolve(__dirname, 'manifest.json')
            } // 注入环境变量
        }
      }
    ]
  }
};

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

"scripts": {
  "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"
}

🛠 实现原理

详细规则和渲染逻辑可见源代码。

🌟 结论

这个 Webpack Loader ，在 Vue2 + Webpack 项目里使用 #ifcomp 条件编译 使用不同的组件，自动删除无关代码，使打包后的文件更小、更简洁。

🚀 让你的 Vue2 项目支持多平台代码分支，轻松适配不同端！