Modular import plugin for babel, compatible with antd, antd-mobile, and so on.
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>);
npm install babel-plugin-import --save-dev
Via .babelrc or babel-loader.
{ "plugins": [["import", 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", }, ]
["import", { "libraryName": "antd" }]: import js modularly["import", { "libraryName": "antd", "style": true }]: import js and css modularly (less source files)["import", { "libraryName": "antd", "style": "css" }]: import js and css modularly (css built files)
babel-plugin-import will be not working if you add the library in webpack config vender.