babel-plugin-component
Modular build plugin for babel.
Last updated 9 years ago by qingwei.li .
MIT · Original npm · Tarball · package.json
$ gnpm install babel-plugin-component 
SYNC missed versions from official npm registry.

babel-plugin-component

NPM version Build Status Coverage Status

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 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

Current Tags

  • 1.1.1                                ...           latest (7 years ago)

25 Versions

  • 1.1.1                                ...           7 years ago
  • 1.1.0                                ...           7 years ago
  • 1.0.0                                ...           7 years ago
  • 0.11.0                                ...           7 years ago
  • 0.10.1                                ...           7 years ago
  • 0.10.0                                ...           7 years ago
  • 0.9.1                                ...           8 years ago
  • 0.9.0                                ...           8 years ago
  • 0.8.0                                ...           8 years ago
  • 0.7.0                                ...           8 years ago
  • 0.6.0                                ...           8 years ago
  • 0.5.1                                ...           8 years ago
  • 0.5.0                                ...           8 years ago
  • 0.4.3                                ...           8 years ago
  • 0.4.2                                ...           8 years ago
  • 0.4.1                                ...           8 years ago
  • 0.4.0                                ...           8 years ago
  • 0.3.3                                ...           8 years ago
  • 0.3.2                                ...           8 years ago
  • 0.3.1                                ...           8 years ago
  • 0.3.0                                ...           9 years ago
  • 0.2.0                                ...           9 years ago
  • 0.1.3                                ...           9 years ago
  • 0.1.2                                ...           9 years ago
  • 0.1.1                                ...           9 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (13)
Dependents (0)
None

Copyright 2013 - present © cnpmjs.org | Home |