babel-plugin-import
此插件是一个babel的模块化导入插件,兼容antd、antd-mobile、lodash、material-ui等pakcage,其支持的参数如下:
options.libraryName, // 字符串,library 名称,必填options.libraryDirectory, // 字符串,library 目录options.style, // 样式引入选项,支持 true、css、函数options.styleLibraryDirectory, // 字符串,library 中 style 目录,此时引入的路径未带后缀options.customStyleName, // 函数,自定义样式文件命名options.camel2DashComponentName,// 布尔值,将组件的驼峰命名转换为破折号命名,默认为trueoptions.camel2UnderlineComponentName,// 布尔值,将组件的驼峰命名转换为下划线命名options.fileName, // 字符串,特定文件命名options.customName, // 函数,自定义组件文件命名options.transformToDefaultImport, // 布尔值,将当前引入转换为default引入,如果您的模块没有default 导出,请将此选项设置为 false。
内部主要实现是该插件在babel做代码转换时,通过读取AST并收集归属于特定的libraryName的有效imported,然后进行命名转换、生成组件和样式的import 代码、移除多余imported等,从而实现按需加载组件和样式。
babel-plugin-component
此插件是一个babel的模块化导入插件,常见于element-ui组件的按需加载,babel-plugin-import package与此package为同一个创建人,两者的核心处理逻辑相同。这个包发布早于前者,但后续经过优化重构为前者,此包已许久未维护。