{"_id":"@canvases/ifcomp-config-loader","name":"@canvases/ifcomp-config-loader","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@canvases/ifcomp-config-loader","version":"1.0.0","description":"本项目提供了一个 Webpack Loader，用于在 Vue2 项目中进行条件编译功能。它允许你在 Web 和不同平台（如 `APP-PLUS`、`H5`、`MP-WEIXIN` 等）之间运用不同的业务组件。","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["multi-project","config-loader","ifcomp","project management"],"author":{"name":"canvases"},"license":"ISC","_id":"@canvases/ifcomp-config-loader@1.0.0","_nodeVersion":"18.20.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-4AUjKIUWswfhah5gaiuKm4b32b1WNuG6wuKdjv9vei3E3vWsRaOiVSX+UNkjlw5Wi7j84j5G0BM3b/+8qkw9iQ==","shasum":"c0eef177d6fc5eacc6263892228bef9e812dbce9","tarball":"https://registry.npmjs.org/@canvases/ifcomp-config-loader/-/ifcomp-config-loader-1.0.0.tgz","fileCount":7,"unpackedSize":6398,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCu8Eh/ezblCYrIOfh3eQ8XvAfQfF6CUO2Q0QyflbIYqwIhALl/E483gqVPi4DklDk1nWH/y54pOnGQVu6rDSSW430G"}]},"_npmUser":{"name":"canvases","email":"canvases@163.com"},"directories":{},"maintainers":[{"name":"canvases","email":"canvases@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ifcomp-config-loader_1.0.0_1742191319055_0.3644112755415436"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-17T06:01:58.990Z","1.0.0":"2025-03-17T06:01:59.218Z","modified":"2025-03-17T06:01:59.441Z"},"maintainers":[{"name":"canvases","email":"canvases@163.com"}],"description":"本项目提供了一个 Webpack Loader，用于在 Vue2 项目中进行条件编译功能。它允许你在 Web 和不同平台（如 `APP-PLUS`、`H5`、`MP-WEIXIN` 等）之间运用不同的业务组件。","keywords":["multi-project","config-loader","ifcomp","project management"],"author":{"name":"canvases"},"license":"ISC","readme":"### **README: UniApp 条件编译 Loader for Webpack + Vue2**\r\n\r\n本项目提供了一个 Webpack Loader，用于在 Vue2 项目中进行条件编译功能。它允许你在 Web 和不同平台（如 `APP-PLUS`、`H5`、`MP-WEIXIN` 等）之间运用不同的业务组件。\r\n\r\n---\r\n\r\n## **📌 功能特点**\r\n✅ **支持 `#ifcomp` 条件编译**，根据 `platform` 变量选择代码块。\r\n✅ **适用于 Webpack + Vue2 项目**，可在**运行**和**打包**时自动处理条件编译。\r\n\r\n---\r\n\r\n## **📂 使用示例**\r\n\r\n在 Vue2 组件或 JavaScript 代码中，你可以使用条件编译语法：\r\n\r\n```js \r\n// #ifcomp  hellowrod\r\nconsole.log('This is for hellowrod component');\r\n// #endif\r\n```\r\n\r\n---\r\n\r\n## **⚙ 安装与配置**\r\n\r\n### **1️⃣ 安装 Loader**\r\n你可以直接在项目中创建 `conditional-loader.js`，或者发布为 npm 包后安装：\r\n\r\n```sh\r\nnpm install your-loader-name\r\n```\r\n\r\n---\r\n\r\n### **2️⃣ 配置 Webpack**\r\n在 `webpack.config.js` 中添加 Loader 配置：\r\n\r\n```js\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\.js$/,\r\n        use:{\r\n            loader: './plugins/module-condition-loader.js',\r\n            options: { platform: process.env.PLATFORM,\r\n                entryJson: path.resolve(__dirname, 'manifest.json')\r\n            } // 注入环境变量\r\n        }\r\n      }\r\n    ]\r\n  }\r\n};\r\n```\r\n\r\n在 `package.json` 中添加不同平台的构建命令：\r\n\r\n```json\r\n\"scripts\": {\r\n  \"build:h5\": \"cross-env PLATFORM=H5 webpack --mode production\",\r\n  \"build:app\": \"cross-env PLATFORM=APP-PLUS webpack --mode production\",\r\n  \"build:wx\": \"cross-env PLATFORM=MP-WEIXIN webpack --mode production\"\r\n}\r\n```\r\n\r\n\r\n---\r\n\r\n## **🛠 实现原理**\r\n详细规则和渲染逻辑可见源代码。\r\n\r\n---\r\n\r\n## **🌟 结论**\r\n这个 Webpack Loader ，在 Vue2 + Webpack 项目里使用 `#ifcomp` 条件编译 使用不同的组件，自动删除无关代码，使打包后的文件更小、更简洁。\r\n\r\n🚀 **让你的 Vue2 项目支持多平台代码分支，轻松适配不同端！**\r\n\r\n","readmeFilename":"README.md","_rev":"1-295215cb4c24333a1cb2b6b8c9a95e59"}