babel-plugin-import
在 Babel 配置中引入该插件，可以针对 antd, antd-mobile, lodash, material-ui等库进行按需加载.
为什么需要 babel-plugin-import
- English Instruction
- 中文说明
如何在项目中添加 babel-plugin-import
- babelrc
- babel-loader
例子
{ "libraryName": "antd" }
import { Button } from 'antd';
ReactDOM.render();
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/button');
ReactDOM.render(<_button>xxxx);
{ "libraryName": "antd", style: "css" }
import { Button } from 'antd';
ReactDOM.render();
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/button');
require('antd/lib/button/style/css');
ReactDOM.render(<_button>xxxx);
{ "libraryName": "antd", style: true }
import { Button } from 'antd';
ReactDOM.render();
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/button');
require('antd/lib/button/style');
ReactDOM.render(<_button>xxxx);
备注 : 配置 style: true 则在项目编译阶段，可以对引入的 antd 样式文件进行编译，从而可以压缩打包尺寸；而配置style: "css", 则直接引入经过打包后的 antd 样式文件
使用方式
npm install babel-plugin-import --save-dev
通过 .babelrc 配置文件或者 babel-loader 模块编程引入.
{
"plugins": [["import", options]]
}
options
options can be object.
{
"libraryName": "antd",
"style": true, // or 'css'
}
{
"libraryName": "lodash",
"libraryDirectory": "", //表示从库的package.json的main入口；否则默认为lib文件夹
"camel2DashComponentName": false, // default: true，将引入的组件名转化为"-"连接的文件名
}
{
"libraryName": "@material-ui/core",
"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'
}
];
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',
style: (name: string, file: Object) => {
if (name === 'antd/lib/utils') {
return false;
}
return `${name}/style/2x`;
}
}
];
customName
使用 customName 来自定义导入文件路径.
插件默认导入文件的基础路径为 lib 目录，并且默认将引入的组件名转换为按照"-"连接的结构:
import { TimePicker } from "antd"
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/time-picker');
设置 camel2DashComponentName 为 false来阻止组件名称的转换:
import { TimePicker } from "antd"
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/TimePicker');
在 Babel 配置文件中，使用 customName 来自定义导入组件路径:
[
'import',
{
libraryName: 'antd',
customName: (name: string) => {
if (name === 'TimePicker') {
return 'antd/lib/custom-time-picker';
}
return `antd/lib/${name}`;
}
}
];
上面编译后的结果为:
import { TimePicker } from "antd"
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/custom-time-picker');
transformToDefaultImport
如果打包后的模块没有default导出，则设置 false
备注
babel-plugin-import will not work properly if you add the library to the webpack config vendor.
https://swift.ctolib.com/article/wiki/108814
babel-plugin-import-custom
针对iview做了额外的优化，https://github.com/videring/babel-plugin-import-custom/blob/master/README.md