babel-plugin-refer-import
v1.7.7
Published
Component modular import plugin for babel.
Downloads
17
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"
},
]
[
{
"libraryName": "antd",
"libraryDirectory": "lib", // default: lib
"style": true,
"refer": "antd-mobile", // bak library use next config with's libraryName == antd-mobile
},
{
"libraryName": "antd-mobile"
},
]
import { View,AntdMobileView } from 'antd';
import View from 'antd/lib/view';
import AntdMobileView from 'antd-mobile/src/AntdMobileView'
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)
If option style is a Function
, babel-plugin-import
will auto import the file which filepath equal to the function return value. This is useful for the components library developers.
e.g.
["import", { "libraryName": "antd", "style": (name) =>
${name}/style/2x}]
: import js and css modularly & css file path isComponentName/style/2x
Note
babel-plugin-import will not work properly if you add the library to the webpack config vendor.