在《VUE UI组件库按需引入的探索（2）》中，你将了解Babel 插件的强大

2023-11-20 12:10:26

在上一篇文章中，我们使用纯treeshaking方案来实现vue ui组件库的按需引入，最终结果虽然差强人意，但是还有很大的优化空间。经过总结反思，我决定换一种方案，尝试babel-plugin-component。先用一个简单的例子，来验证一下babel-plugin-component的功效。如下，代码目录结构：

├─components
│  └─HelloWorld.vue
├─main.js

HelloWorld.vue 代码：

<template>
  <div>Hello World!</div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

main.js 代码：

import HelloWorld from './components/HelloWorld.vue'

new Vue({
  el: '#app',
  components: {
    HelloWorld
  },
  template: '<HelloWorld/>'
})

运行上面的代码，最终的打包结果，HelloWorld.vue代码也打包进去了，并没有发生treeshaking。那么，我们尝试使用babel-plugin-component插件。安装插件：

npm install --save-dev babel-plugin-component

然后在babelrc中配置插件：

{
  "plugins": [
    ["component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后，我们再运行一下，发现HelloWorld.vue代码，已经被treeshaking出去了，看来，这种方式是可行的。接下来，我将介绍如何使用babel-plugin-component来实现Vue UI组件库的按需引入。

安装babel-plugin-component插件。

npm install --save-dev babel-plugin-component

在babelrc中配置插件。

{
  "plugins": [
    ["component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在Vue组件中使用babel-plugin-component插件。

import { Button } from 'element-ui'

export default {
  name: 'HelloWorld',
  components: {
    [Button.name]: Button
  },
  template: '<Button type="primary">Hello World!</Button>'
}