babel-plugin-import
Modular import plugin for babel, compatible with antd, antd-mobile, lodash, material-ui, and so on.
Why babel-plugin-import
Where to add babel-plugin-import
Example
{ "libraryName": "antd" }
;ReactDOM; ↓ ↓ ↓ ↓ ↓ ↓ var _button = ;ReactDOM;
{ "libraryName": "antd", style: "css" }
;ReactDOM; ↓ ↓ ↓ ↓ ↓ ↓ var _button = ;;ReactDOM;
{ "libraryName": "antd", style: true }
;ReactDOM; ↓ ↓ ↓ ↓ ↓ ↓ var _button = ;;ReactDOM;
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": "lodash" "libraryDirectory": "" "camel2DashComponentName": false // default: true
"libraryName": "@material-ui/core" "libraryDirectory": "components" // default: lib "camel2DashComponentName": false // default: true
~options
can be an array.~ It's not available in babel@7+
For Example:
"libraryName": "antd" "libraryDirectory": "lib" // default: lib "style": true "libraryName": "antd-mobile"
Options
can't be an array in babel@7+, but you can add plugins with name to support multiple dependencies.
For Example:
// .babelrc"plugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"], ["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "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)
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
If a component has no style, you can use the style
function to return a false
and the style will be ignored.
e.g.
"import" "libraryName": "antd" { ifname === 'antd/lib/utils' return false; return `/style/2x`; }
customName
We can use customName
to customize import file path.
For example, the default behavior:
↓ ↓ ↓ ↓ ↓ ↓;
You can set camel2DashComponentName
to false
to disable transfer from camel to dash:
↓ ↓ ↓ ↓ ↓ ↓;
And finally, you can use customName
to customize each name parsing:
"import" "libraryName": "antd" { if name === 'TimePicker' return 'antd/lib/custom-time-picker'; return `antd/lib/`; }
So this result is:
↓ ↓ ↓ ↓ ↓ ↓;
In some cases, the transformer may serialize the configuration object. If we set the customName
to a function, it will lost after the serialization.
So we also support specifying the customName with a JavaScript source file path:
"import" "libraryName": "antd" "customName":
The customName.js
looks like this:
module { return `antd/lib/`;};
transformToDefaultImport
Set this option to false
if your module does not have a default
export.
Note
babel-plugin-import will not work properly if you add the library to the webpack config vendor.