babel-plugin-kv-import

Modular import plugin for kv-design

Example

{ "libraryName": "kv-design" }

import { Button } from 'kv-design';
ReactDOM.render(<Button label="xxxx" />);

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('kv-design/lib/button');
ReactDOM.render(<_button label="xxxx" />);

Usage

npm install babel-plugin-kv-import --save-dev

Via .babelrc or babel-loader.

{
  "plugins": [["kv-import", options]]
}

options

• libraryName string (require)

• style boolean | css | 'less' | function

  default false

• libraryDirectory string

  default 'lib'

• customName function

• deleteImportNameContent string

Import name based on deleteImportNameContent delete path.

options can be an object:

{
    libraryName: 'kv-design',
    libraryDirectory: 'lib',
    style: true
},

options can be an array.

[
  {
    libraryName: 'kv-design',
    libraryDirectory: 'lib',
    style: true
  },
  {
    libraryName: 'kv-ui-core',
    libraryDirectory: 'lib'
  }
];

style

• ["import", { "libraryName": "kv-design" }]: import js modularly
• ["import", { "libraryName": "kv-design", "style": "css" }]: import js and css modularly
• ["import", { "libraryName": "kv-design", "style": "less" }]: import js and less modularly

Note

If option style is a Function, babel-plugin-kv-import will auto import the file which filepath equal to the function return value. babel-plugin-kv-import will not work properly if you add the library to the webpack config [vendor].