一、babel-plugin-import 原理
主要有3步:
- 在
importDeclaration
节点处,收集依赖,就是获取import { Button } from 'antd'
中的Button
- 在
CallExpression
等节点处,判断该组件是否使用 - 对于使用的UI组件,通过
addSideEffect/addNamed/addDefault
等方式增加额外的css
导入语句。
二、babel-plugin-component
babel-plugin-component
是fork
的babel-plugin-import
项目,二者原理、使用方式基本相同。
三、相关资料
- 简单实现 babel-plugin-import 插件 (opens new window)
- babel-plugin-component 和 babel-plugin-import区别 (opens new window)