babel-plugin-import与babel-plugin-component的区别与联系

1,049 阅读1分钟
babel-plugin-import

      此插件是一个babel的模块化导入插件,兼容antdantd-mobilelodashmaterial-ui等pakcage,其支持的参数如下:

  • options.libraryName, // 字符串,library 名称,必填
  • options.libraryDirectory, // 字符串,library 目录
  • options.style, // 样式引入选项,支持 true、css、函数
  • options.styleLibraryDirectory, //  字符串,library 中 style 目录,此时引入的路径未带后缀
  • options.customStyleName, // 函数,自定义样式文件命名
  • options.camel2DashComponentName,// 布尔值,将组件的驼峰命名转换为破折号命名,默认为true
  • options.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为同一个创建人,两者的核心处理逻辑相同。这个包发布早于前者,但后续经过优化重构为前者,此包已许久未维护。