babel-plugin-import

Modular import plugin for babel, compatible with antd, antd-mobile, and so on.

---

Why babel-plugin-import

• English Instruction
• 中文说明

Example

Converts

import { Button } from 'antd';

ReactDOM.render(<div>
  <Button>xxxx</Button>
</div>);

(roughly) to

var _button = require('antd/lib/button');

ReactDOM.render(<div>
  <_button>xxxx</_button>
</div>);

Usage

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

Via .babelrc or babel-loader.

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

options

options can be object.

{
  "libraryName": "antd",
  "style": true,   // or 'css'
}

{
  "libraryName": "material-ui",
  "libraryDirectory": "components",  // default: lib
  "camel2DashComponentName": false,  // default: true
}

options can be an array.

For Example:

[
  {
    "libraryName": "antd",
    "libraryDirectory": "lib",   // default: lib
    "style": true
  },
  {
    "libraryName": "antd-mobile",
    "libraryDirectory": "component",
  },
]

style

• ["import", { "libraryName": "antd" }]: import js modularly
• ["import", { "libraryName": "antd", "style": true }]: import js and css modularly (LESS/Sass source files)
• ["import", { "libraryName": "antd", "style": "css" }]: import js and css modularly (css built files)

Note

babel-plugin-import will be not working if you add the library in webpack config vendor.