{"id":29562209,"url":"https://github.com/foolishchow/swc-plugin-component","last_synced_at":"2025-07-18T17:10:48.486Z","repository":{"id":302986284,"uuid":"1014076457","full_name":"foolishchow/swc-plugin-component","owner":"foolishchow","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-05T02:29:03.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-05T02:53:30.238Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foolishchow.png","metadata":{"files":{"readme":"README.ZH-CN.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-05T02:28:34.000Z","updated_at":"2025-07-05T02:29:06.000Z","dependencies_parsed_at":"2025-07-05T03:20:24.913Z","dependency_job_id":"00b024e5-6e4b-461f-b81e-bd04a528a675","html_url":"https://github.com/foolishchow/swc-plugin-component","commit_stats":null,"previous_names":["foolishchow/swc-plugin-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/foolishchow/swc-plugin-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Fswc-plugin-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Fswc-plugin-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Fswc-plugin-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Fswc-plugin-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foolishchow","download_url":"https://codeload.github.com/foolishchow/swc-plugin-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Fswc-plugin-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265799068,"owners_count":23830049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-18T17:10:46.118Z","updated_at":"2025-07-18T17:10:48.469Z","avatar_url":"https://github.com/foolishchow.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SWC Plugin Component\n\n[English Doc](README.md)\n\n一个用于组件库按需加载的 SWC 插件，类似于 `babel-plugin-component`。自动将组件库的整体导入转换为按需导入，显著减少打包体积。\n\n## 特性\n\n- 🚀 **按需导入** - 自动转换组件导入，减少打包体积\n- 🎨 **自动样式导入** - 支持 CSS/SCSS/Less 等样式文件自动导入\n- 📦 **多库支持** - 一个配置文件支持多个组件库\n- 🔧 **灵活配置** - 支持多种配置方式，适应不同组件库\n- ⚡ **高性能** - 基于 SWC，编译速度快\n\n## 安装\n\n```bash\nnpm install swc-plugin-component --save-dev\n```\n\n## 快速开始\n\n### 1. 基础配置\n\n在 `.swcrc` 文件中添加插件配置：\n\n```json\n{\n  \"jsc\": {\n    \"experimental\": {\n      \"plugins\": [\n        [\n          \"swc-plugin-component\",\n          {\n            \"library_name\": \"element-ui\",\n            \"style\": true\n          }\n        ]\n      ]\n    }\n  }\n}\n```\n\n### 2. 转换效果\n\n**输入代码：**\n```javascript\nimport { Button, Input, DatePicker } from 'element-ui';\n```\n\n**转换后：**\n```javascript\nimport 'element-ui/lib/theme-chalk/button.css';\nimport Button from 'element-ui/lib/button/index';\nimport 'element-ui/lib/theme-chalk/input.css';\nimport Input from 'element-ui/lib/input/index';\nimport 'element-ui/lib/theme-chalk/date-picker.css';\nimport DatePicker from 'element-ui/lib/date-picker/index';\n```\n\n## 配置选项\n\n### 基础配置\n\n| 选项 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| `library_name` | `string` | - | 组件库名称（必填） |\n| `style` | `boolean \\| string` | `true` | 样式导入配置 |\n| `lib_dir` | `string` | `\"lib\"` | 组件目录名 |\n| `root` | `string` | `\"index\"` | 组件入口文件名 |\n| `camel2_dash` | `boolean` | `true` | 驼峰转 kebab-case |\n\n### 高级配置\n\n| 选项 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| `style_library` | `string` | - | 样式库路径 |\n| `style_library_name` | `string` | - | 样式库名称（简化配置） |\n\n## 使用示例\n\n### Element UI\n\n```json\n{\n  \"library_name\": \"element-ui\",\n  \"style\": true,\n  \"style_library\": \"element-ui/lib/theme-chalk\"\n}\n```\n\n```javascript\n// 输入\nimport { Button, Input } from 'element-ui';\n\n// 输出\nimport 'element-ui/lib/theme-chalk/button.css';\nimport Button from 'element-ui/lib/button/index';\nimport 'element-ui/lib/theme-chalk/input.css';\nimport Input from 'element-ui/lib/input/index';\n```\n\n### Ant Design Vue\n\n```json\n{\n  \"library_name\": \"ant-design-vue\",\n  \"lib_dir\": \"es\",\n  \"style\": \"dist/antd/[module].css\"\n}\n```\n\n```javascript\n// 输入\nimport { Card, Button } from 'ant-design-vue';\n\n// 输出\nimport 'ant-design-vue/dist/antd/card.css';\nimport Card from 'ant-design-vue/es/card/index';\nimport 'ant-design-vue/dist/antd/button.css';\nimport Button from 'ant-design-vue/es/button/index';\n```\n\n### 自定义样式路径\n\n```json\n{\n  \"library_name\": \"my-ui\",\n  \"style\": \"styles/[module].scss\"\n}\n```\n\n```javascript\n// 输入\nimport { Button } from 'my-ui';\n\n// 输出\nimport 'my-ui/styles/button.scss';\nimport Button from 'my-ui/lib/button/index';\n```\n\n### 禁用样式导入\n\n```json\n{\n  \"library_name\": \"my-ui\",\n  \"style\": false,\n  \"lib_dir\": \"components\"\n}\n```\n\n```javascript\n// 输入\nimport { Button } from 'my-ui';\n\n// 输出（只导入组件，不导入样式）\nimport Button from 'my-ui/components/button/index';\n```\n\n### 多组件库配置\n\n```json\n{\n  \"jsc\": {\n    \"experimental\": {\n      \"plugins\": [\n        [\n          \"swc-plugin-component\",\n          [\n            {\n              \"library_name\": \"element-ui\",\n              \"style\": true,\n              \"style_library\": \"element-ui/lib/theme-chalk\"\n            },\n            {\n              \"library_name\": \"ant-design-vue\",\n              \"lib_dir\": \"es\",\n              \"style\": \"dist/antd/[module].css\"\n            },\n            {\n              \"library_name\": \"lodash\",\n              \"style\": false,\n              \"lib_dir\": \"\",\n              \"camel2_dash\": false\n            }\n          ]\n        ]\n      ]\n    }\n  }\n}\n```\n\n## 支持的导入方式\n\n### 命名导入\n```javascript\nimport { Button, Input } from 'element-ui';\n```\n\n### 默认导入\n```javascript\nimport Button from 'element-ui';\n```\n\n### 混合导入\n```javascript\nimport Modal, { Button, Input } from 'element-ui';\n```\n\n## 配置详解\n\n### style 配置\n\n#### 布尔值\n```json\n{\n  \"style\": true   // 启用默认样式导入\n}\n```\n\n#### 字符串路径\n```json\n{\n  \"style\": \"styles/[module].css\"  // 自定义样式路径\n}\n```\n\n支持的占位符：\n- `[module]` - 组件名称（经过驼峰转换）\n\n### 路径生成规则\n\n**组件路径：** `{library_name}/{lib_dir}/{component_name}/{root}`\n\n**样式路径：** \n- 使用 `style_library`：`{style_library}/{component_name}.css`\n- 使用 `style` 字符串：`{library_name}/{style_path}`\n- 默认：`{library_name}/{lib_dir}/theme-chalk/{component_name}.css`\n\n### 驼峰转换\n\n当 `camel2_dash: true` 时：\n- `DatePicker` → `date-picker`\n- `RadioGroup` → `radio-group`\n\n当 `camel2_dash: false` 时：\n- `DatePicker` → `DatePicker`\n- `RadioGroup` → `RadioGroup`\n\n## 常见组件库配置\n\n### Element UI\n```json\n{\n  \"library_name\": \"element-ui\",\n  \"style\": true,\n  \"style_library\": \"element-ui/lib/theme-chalk\"\n}\n```\n\n### Ant Design Vue\n```json\n{\n  \"library_name\": \"ant-design-vue\",\n  \"lib_dir\": \"es\",\n  \"style\": \"dist/antd/[module].css\"\n}\n```\n\n### Vuetify\n```json\n{\n  \"library_name\": \"vuetify\",\n  \"lib_dir\": \"lib\",\n  \"style\": \"dist/vuetify.css\"\n}\n```\n\n### Material-UI\n```json\n{\n  \"library_name\": \"@material-ui/core\",\n  \"lib_dir\": \"\",\n  \"style\": false,\n  \"camel2_dash\": false\n}\n```\n\n### Lodash\n```json\n{\n  \"library_name\": \"lodash\",\n  \"lib_dir\": \"\",\n  \"style\": false,\n  \"camel2_dash\": false\n}\n```\n\n## 完整示例\n\n查看 [example](./example) 目录获取完整的使用示例，包含：\n\n- 多种配置方式的演示\n- 不同组件库的配置示例\n- 实际转换效果展示\n\n运行示例：\n```bash\ncd example\nnpm install\nnpm run build\ncat dist/index.js  # 查看转换结果\n```\n\n## 故障排除\n\n### 常见问题\n\n**Q: 为什么导入没有被转换？**\n\nA: 检查以下几点：\n1. 确认 `library_name` 与实际导入的库名称完全匹配\n2. 确认插件配置格式正确\n3. 确认 SWC 配置文件路径正确\n\n**Q: 样式文件路径不正确怎么办？**\n\nA: 根据组件库的实际目录结构调整配置：\n1. 检查组件库的样式文件实际位置\n2. 使用 `style_library` 或 `style` 配置自定义样式路径\n3. 使用 `[module]` 占位符动态生成路径\n\n**Q: 支持哪些文件扩展名？**\n\nA: 支持所有常见的样式文件：`.css`, `.scss`, `.sass`, `.less`, `.styl` 等\n\n## 项目状态\n\n### 功能完整性\n\n本项目是 `babel-plugin-component` 的 SWC 版本实现，目前已实现 **83%** 的功能特性（10/12）。\n\n#### ✅ 已实现功能\n\n- ✅ **基础按需导入** - 支持命名导入、默认导入和混合导入\n- ✅ **样式自动导入** - 支持 CSS/SCSS/Less 等样式文件导入\n- ✅ **多库支持** - 一个配置文件支持多个组件库\n- ✅ **灵活配置** - 支持 `library_name`, `style`, `lib_dir`, `root`, `camel2_dash`\n- ✅ **简化配置** - 支持 `style_library_name` 简化样式库配置\n- ✅ **高级配置** - 支持 `style_library.name`, `style_library.path`\n- ✅ **独立主题包** - 支持 `~` 前缀的独立主题包导入\n- ✅ **路径模板** - 支持 `[module]` 占位符动态生成路径\n- ✅ **驼峰转换** - 支持组件名驼峰转 kebab-case\n- ✅ **完整测试** - 包含所有功能的测试用例和示例\n\n#### 🚧 待实现功能\n\n目前还有 2 个高级功能待实现：\n\n1. **`styleLibrary.base`** - 基础样式自动导入\n   ```json\n   {\n     \"style_library\": {\n       \"name\": \"theme-chalk\",\n       \"base\": true  // 自动导入 base.css\n     }\n   }\n   ```\n\n2. **`styleLibrary.mixin`** - 样式回退机制\n   ```json\n   {\n     \"style_library\": {\n       \"name\": \"theme-chalk\", \n       \"mixin\": true  // 找不到主题样式时回退到库默认样式\n     }\n   }\n   ```\n\n### 开发状态\n\n- **✅ 核心功能完整** - 所有主要功能已实现并通过测试\n- **✅ 文档完善** - 提供详细的使用指南和示例\n- **✅ 示例齐全** - 包含多种组件库的配置示例\n- **✅ 生产就绪** - 可用于生产环境\n\n### 与 babel-plugin-component 对比\n\n| 功能 | babel-plugin-component | swc-plugin-component | 状态 |\n|------|------------------------|----------------------|------|\n| 基础按需导入 | ✅ | ✅ | 完全兼容 |\n| 样式自动导入 | ✅ | ✅ | 完全兼容 |\n| 多库支持 | ✅ | ✅ | 完全兼容 |\n| 简化配置 | ✅ | ✅ | 完全兼容 |\n| 高级配置 | ✅ | ✅ | 完全兼容 |\n| 独立主题包 | ✅ | ✅ | 完全兼容 |\n| 路径模板 | ✅ | ✅ | 完全兼容 |\n| 驼峰转换 | ✅ | ✅ | 完全兼容 |\n| 默认导入 | ✅ | ✅ | 完全兼容 |\n| 多种导入方式 | ✅ | ✅ | 完全兼容 |\n| **基础样式导入** | ✅ | ❌ | 待实现 |\n| **样式回退机制** | ✅ | ❌ | 待实现 |\n\n### 使用建议\n\n**推荐使用场景：**\n- 需要高性能编译的项目（SWC 比 Babel 快 10-20 倍）\n- 现有使用 `babel-plugin-component` 的项目迁移\n- 新项目的组件库按需导入需求\n\n**注意事项：**\n- 如果项目依赖 `styleLibrary.base` 或 `styleLibrary.mixin` 功能，建议暂时继续使用 `babel-plugin-component`\n- 其他所有功能都已完全兼容，可以安全迁移\n\n## 兼容性\n\n- **SWC**: `^1.3.0`\n- **Node.js**: `\u003e=14.0.0`\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoolishchow%2Fswc-plugin-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoolishchow%2Fswc-plugin-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoolishchow%2Fswc-plugin-component/lists"}