# babel-plugin-component

> Modular build plugin for babel.

Latest version **1.1.1** (published 2018-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-component
pnpm add babel-plugin-component
yarn add babel-plugin-component
bun add babel-plugin-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2018-05-08 |
| First published | 2016-05-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 450 |
| Maintainers | qingwei.li, yi.yang |
| Keywords | babel-plugin |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-component
- Repository: https://github.com/ElementUI/babel-plugin-component
- Homepage: https://github.com/ElementUI/babel-plugin-component#readme
- Issues: https://github.com/ElementUI/babel-plugin-component/issues
- npm.io page: https://npm.io/package/babel-plugin-component

## Dependencies (1)

- [@babel/helper-module-imports](https://npm.io/package/@babel/helper-module-imports.md) 7.0.0-beta.35

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2018-05-08
- 1.1.0 — 2018-01-15
- 1.0.0 — 2017-12-19
- 0.11.0 — 2017-12-19
- 0.10.1 — 2017-09-20
- 0.10.0 — 2017-07-08
- 0.9.1 — 2017-03-09
- 0.9.0 — 2017-01-16
- 0.8.0 — 2017-01-03
- 0.7.0 — 2016-12-30
- 0.6.0 — 2016-11-12
- 0.5.1 — 2016-11-02
- 0.5.0 — 2016-10-23
- 0.4.3 — 2016-10-13
- 0.4.2 — 2016-09-26
- … 10 more at https://npm.io/package/babel-plugin-component/versions

## README

# babel-plugin-component

[![NPM version](https://img.shields.io/npm/v/babel-plugin-component.svg)](https://npmjs.org/package/babel-plugin-component)
[![Build Status](https://travis-ci.org/ElementUI/babel-plugin-component.svg?branch=master)](https://travis-ci.org/ElementUI/babel-plugin-component)
[![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)

## Install

```shell
npm i babel-plugin-component -D

# For babel6
npm i babel-plugin-component@0 -D
```

## Example

Converts

```javascript
import { Button } from 'components'
```

to

```javascript
var button = require('components/lib/button')
require('components/lib/button/style.css')
```

## styleLibraryName Example

Converts

```javascript
import Components from 'components'
import { Button } from 'components'
```

to

```javascript
require('components/lib/styleLibraryName/index.css')
var button = require('components/lib/styleLibraryName/button.css')
```

## Usage

Via `.babelrc` or babel-loader.

```javascript
{
  "plugins": [["component", options]]
}
```

## Multiple Module
```javascript
{
  "plugins": [xxx,
    ["component", {
      libraryName: "antd",
      style: true,
    }, "antd"],
    ["component", {
      libraryName: "test-module",
      style: true,
    }, "test-module"]
  ]
}
```

### Component directory structure
```
- lib // 'libDir'
  - index.js // or custom 'root' relative path
  - style.css // or custom 'style' relative path
  - componentA
    - index.js
    - style.css
  - componentB
    - index.js
    - style.css
```

### Theme library directory structure
```
- lib
  - theme-default // 'styleLibraryName'
    - base.css // required
    - index.css // required
    - componentA.css
    - componentB.css
  - theme-material
    - ...
  - componentA
    - index.js
  - componentB
    - index.js
```
or 
```
- lib
  - theme-custom // 'styleLibrary.name'
    - base.css // if styleLibrary.base true
    - index.css // required
    - componentA.css // default 
    - componentB.css
  - theme-material
    - componentA
      -index.css  // styleLibrary.path  [module]/index.css
    - componentB
      -index.css
  - componentA
    - index.js
  - componentB
    - index.js
```

### options

- `["component"]`: import js modularly
- `["component", { "libraryName": "component" }]`: module name
- `["component", { "styleLibraryName": "theme_package" }]`: style module name
- `["component", { "styleLibraryName": "~independent_theme_package" }]`: Import a independent theme package
- `["component", { "styleLibrary": {} }]`: Import a independent theme package with more config
  ```
  styleLibrary: {
    "name": "xxx", // same with styleLibraryName
    "base": true,  // if theme package has a base.css
    "path": "[module]/index.css",  // the style path. e.g. module Alert =>  alert/index.css
    "mixin": true  // if theme-package not found css file, then use [libraryName]'s css file
  }
  ```
- `["component", { "style": true }]`: import js and css from 'style.css'
- `["component", { "style": cssFilePath }]`: import style css from filePath
- `["component", { "libDir": "lib" }]`: lib directory
- `["component", { "root": "index" }]`: main file dir
- `["component", { "camel2Dash": false }]`: whether parse name to dash mode or not, default `true`

---
_Source: https://npm.io/package/babel-plugin-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._