{"id":13544305,"url":"https://github.com/ElementUI/babel-plugin-component","last_synced_at":"2025-04-02T14:30:46.737Z","repository":{"id":54336249,"uuid":"59559682","full_name":"ElementUI/babel-plugin-component","owner":"ElementUI","description":"Modular element-ui build plugin for babel.","archived":false,"fork":true,"pushed_at":"2021-01-20T07:09:41.000Z","size":123,"stargazers_count":451,"open_issues_count":43,"forks_count":96,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-19T05:03:25.469Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"umijs/babel-plugin-import","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ElementUI.png","metadata":{"files":{"readme":"README.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}},"created_at":"2016-05-24T09:31:08.000Z","updated_at":"2025-03-14T16:25:53.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ElementUI/babel-plugin-component","commit_stats":null,"previous_names":["qingwei-li/babel-plugin-component"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElementUI%2Fbabel-plugin-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElementUI%2Fbabel-plugin-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElementUI%2Fbabel-plugin-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElementUI%2Fbabel-plugin-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ElementUI","download_url":"https://codeload.github.com/ElementUI/babel-plugin-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245507052,"owners_count":20626537,"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":"2024-08-01T11:00:45.559Z","updated_at":"2025-04-02T14:30:44.381Z","avatar_url":"https://github.com/ElementUI.png","language":"JavaScript","funding_links":[],"categories":["使用","JavaScript"],"sub_categories":["按需引入"],"readme":"# babel-plugin-component\n\n[![NPM version](https://img.shields.io/npm/v/babel-plugin-component.svg)](https://npmjs.org/package/babel-plugin-component)\n[![Build Status](https://travis-ci.org/ElementUI/babel-plugin-component.svg?branch=master)](https://travis-ci.org/ElementUI/babel-plugin-component)\n[![Coverage Status](https://coveralls.io/repos/github/QingWei-Li/babel-plugin-component/badge.svg?branch=master)](https://coveralls.io/github/QingWei-Li/babel-plugin-component?branch=master)\n\n## Install\n\n```shell\nnpm i babel-plugin-component -D\n\n# For babel6\nnpm i babel-plugin-component@0 -D\n```\n\n## Example\n\nConverts\n\n```javascript\nimport { Button } from 'components'\n```\n\nto\n\n```javascript\nvar button = require('components/lib/button')\nrequire('components/lib/button/style.css')\n```\n\n## styleLibraryName Example\n\nConverts\n\n```javascript\nimport Components from 'components'\nimport { Button } from 'components'\n```\n\nto\n\n```javascript\nrequire('components/lib/styleLibraryName/index.css')\nvar button = require('components/lib/styleLibraryName/button.css')\n```\n\n## Usage\n\nVia `.babelrc` or babel-loader.\n\n```javascript\n{\n  \"plugins\": [[\"component\", options]]\n}\n```\n\n## Multiple Module\n```javascript\n{\n  \"plugins\": [xxx,\n    [\"component\", {\n      libraryName: \"antd\",\n      style: true,\n    }, \"antd\"],\n    [\"component\", {\n      libraryName: \"test-module\",\n      style: true,\n    }, \"test-module\"]\n  ]\n}\n```\n\n### Component directory structure\n```\n- lib // 'libDir'\n  - index.js // or custom 'root' relative path\n  - style.css // or custom 'style' relative path\n  - componentA\n    - index.js\n    - style.css\n  - componentB\n    - index.js\n    - style.css\n```\n\n### Theme library directory structure\n```\n- lib\n  - theme-default // 'styleLibraryName'\n    - base.css // required\n    - index.css // required\n    - componentA.css\n    - componentB.css\n  - theme-material\n    - ...\n  - componentA\n    - index.js\n  - componentB\n    - index.js\n```\nor \n```\n- lib\n  - theme-custom // 'styleLibrary.name'\n    - base.css // if styleLibrary.base true\n    - index.css // required\n    - componentA.css // default \n    - componentB.css\n  - theme-material\n    - componentA\n      -index.css  // styleLibrary.path  [module]/index.css\n    - componentB\n      -index.css\n  - componentA\n    - index.js\n  - componentB\n    - index.js\n```\n\n### options\n\n- `[\"component\"]`: import js modularly\n- `[\"component\", { \"libraryName\": \"component\" }]`: module name\n- `[\"component\", { \"styleLibraryName\": \"theme_package\" }]`: style module name\n- `[\"component\", { \"styleLibraryName\": \"~independent_theme_package\" }]`: Import a independent theme package\n- `[\"component\", { \"styleLibrary\": {} }]`: Import a independent theme package with more config\n  ```\n  styleLibrary: {\n    \"name\": \"xxx\", // same with styleLibraryName\n    \"base\": true,  // if theme package has a base.css\n    \"path\": \"[module]/index.css\",  // the style path. e.g. module Alert =\u003e  alert/index.css\n    \"mixin\": true  // if theme-package not found css file, then use [libraryName]'s css file\n  }\n  ```\n- `[\"component\", { \"style\": true }]`: import js and css from 'style.css'\n- `[\"component\", { \"style\": cssFilePath }]`: import style css from filePath\n- `[\"component\", { \"libDir\": \"lib\" }]`: lib directory\n- `[\"component\", { \"root\": \"index\" }]`: main file dir\n- `[\"component\", { \"camel2Dash\": false }]`: whether parse name to dash mode or not, default `true`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElementUI%2Fbabel-plugin-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FElementUI%2Fbabel-plugin-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElementUI%2Fbabel-plugin-component/lists"}