babel-plugin-import-billd
迷你版按需加载插件
简介
参考了babel-plugin-import，实现了我认为核心的三个配置项：libraryName、libraryDirectory、style
babel 插件简介
- Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）
- 转换步骤接收 AST 并对其进行遍历，在此过程中对节点进行添加、更新及移除等操作。 这是 Babel 或是其他编译器中最复杂的过程 同时也是插件将要介入工作的部分
可以得出结论，babel 插件主要是操作 ast，而操作 ast 其实就是操作 visitor
案例
最粗浅的理解就是在编译阶段，将以下代码（或者说是这个文件）：
import { Button } from 'ant-design-vue';
console.log(Button);转换为；
import Button from 'ant-design-vue/es/button';
import 'ant-design-vue/es/button/style.css';
console.log(Button);或者转换为：
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/lib/button/style.css';
console.log(Button);安装
npm i babel-plugin-import-billd --save-dev使用
babel.config.js：
- libraryName
- libraryDirectory
- style
这三个属性的具体行为基本和 babel-plugin-import 一致
plugins: [
// ...
[
'import-billd',
// Options在 babel@7+ 中不能是数组，但是可以添加带名字的插件来支持多个依赖。
{ libraryName: 'ant-design-vue', libraryDirectory: 'lib', style: 'css' },
'aaa', // 这个名字可以随便起
],
[
'import-billd',
{ libraryName: 'antd', libraryDirectory: 'lib', style: true },
'bbb',
],
],测试
由于现代的组件库大多数都实现了原生的 ES modules 的 tree shaking，因此我们需要下载旧版的组件库才能测试出效果，这里我使用了 ant-design-vue 的 1.1.0 版本以及 antd 的 2.13.14 版本进行测试。
当遇到下面的代码时，会仅仅将 Button 和 Switch 进行打包：
import { Button, Switch } from 'ant-design-vue';
console.log(Button, Switch);