babel-plugin-component
Install
npm i babel-plugin-component -D # For babel6 npm i babel-plugin-component@0 -D
Example
Converts
to
var button =
styleLibraryName Example
Converts
to
var button =
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