babel-plugin-component-customize
v1.1.1
Published
Modular build plugin for babel.
Downloads
2
Readme
babel-plugin-component
Install
npm i babel-plugin-component -D
# For babel6
npm i babel-plugin-component@0 -D
Example
Converts
import { Button } from 'components'
to
var button = require('components/lib/button')
require('components/lib/button/style.css')
styleLibraryName Example
Converts
import Components from 'components'
import { Button } from 'components'
to
require('components/lib/styleLibraryName/index.css')
var button = require('components/lib/styleLibraryName/button.css')
Usage
Via .babelrc
or babel-loader.
{
"plugins": [["component", options]]
}
Multiple Module
{
"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 configstyleLibrary: { "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, defaulttrue