Element 按需引入：理解 Babel 和 babel-plugin-component 的配置

大魔王得小跟班:
讲得很棒~ 期待up出更多优质的教学内容[支持]

子政布衣:
讲的很好，将完整引入和按需引入的原理都讲解清楚了，尤其是按需引入在babel.config.js上修改是完成import 'element-ui/lib/theme-chalk/XXX.css'的过程，点赞~

【回复】感谢，总结得也很棒[给心心]
zY_C137:
老师，babel插件与vite和weback的区别是啥啊

【回复】回复 @二十三啊 :然后，vue2 和 vue3，以及 webpack 和 vite，是用到不同的插件来实现这个自动引入对应组件 CSS 的这个目的的哦。
【回复】回复 @二十三啊 :哦哦，不是。首先你要理解下，组件的按需引入，为什么还要再单独安装一些插件，它的作用是什么？简单描述就是，安装并配置好了那些插件后，就可以只引入比如 Button 组件的 JS 文件，webpack 或 vite 就能自动引入对应的 CSS 文件，不再需要手动再 import 对应组件的 CSS 了。
【回复】Babel 是单一功能，对 JS 进行转换的工具；weboack / Vite 可以集成 Babel 的功能，还能集成 Sass、PostCSS 等。
endlesslooper:
请问老师，如果我自己组件库打包成图片这种模式，我如何按需加载呢

【回复】回复 @endlesslooper :哦哦，我明白了。你是希望 import 组件的时候，能自动引入组件对应的 CSS 是吗？这个是要在项目中配置的，根据构建后的目录结构配置下 Babel 插件的。
【回复】回复 @跟华晨学前端 :就是我自己用vue cli打包成一个组件库，打包成了这种umd模式，我想打包成es module那种，可以让babel pulugin component工程化按需加载
【回复】没有明白你的意思，可以重新描述一下吗