element-ui使用babel-plugin-component按需打包组件及官方自定义生成css主题

安装babel-plugin-component

npm i -D babel-plugin-component

⚙ babel-plugin-component 配置

• 在babel.config.js plugins新增配置

plugins: [
  [
    'component',
    {
      libraryName: 'element-ui',
      // ~ + 自定义路径
      styleLibraryName: '~src/assets/css/element-ui'
    }
  ]
]

• 或者在.babelrc新增配置

"plugins": [
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "~src/assets/css/element-ui"
    }
  ]
]

解释

• 上面的libraryName属性指定包名
• styleLibraryName属性

// babel-plugin-component 对styleLibraryName属性的处理
if (!cachePath[libraryName]) {
  var themeName = styleLibraryName.replace(/^~/, '');
  cachePath[libraryName] = styleLibraryName.indexOf('~') === 0 ? resolve(process.cwd(), themeName) : "".concat(libraryName, "/").concat(libDir, "/").concat(themeName);
}

由此可以看出styleLibraryName支持自定义主题路径, 前提是路径前带~符号. 否则取

// element-ui/lib/theme-chalk
libraryName + '/lib' + styleLibraryName

结论

当需要babel-plugin-component插件按需加载自定义主题生成好的css文件时只需要通过styleLibraryName属性~ + 路径指定就可以了