babel-plugin-import-7
v1.6.7
Published
Component modular import plugin for babel.
Downloads
1,619
Readme
babel-plugin-import
Modular import plugin for babel, compatible with antd, antd-mobile, and so on.
Why babel-plugin-import
Where to add babel-plugin-import
Example
{ "libraryName": "antd" }
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/button');
ReactDOM.render(<_button>xxxx</_button>);
{ "libraryName": "antd", style: "css" }
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/button');
require('antd/lib/button/style/css');
ReactDOM.render(<_button>xxxx</_button>);
{ "libraryName": "antd", style: true }
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/button');
require('antd/lib/button/style');
ReactDOM.render(<_button>xxxx</_button>);
Note : with style: true
css source files are imported and optimizations can be done during compilation time. With style: "css"
, pre bundled css files are imported as they are.
style: true
can reduce the bundle size significantly, depending on your usage of the library.
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"
},
]
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 not work properly if you add the library to the webpack config vendor.