vite批量引入并注册组件

有些时候当某一个文件夹下的文件都需要被引入的时候，一个一个的去import就会显得非常麻烦，webpack和vite都提供了批量引入文件的方法，下面来介绍一下vite和webpack中的批量引入文件。

首先是webpack中
require.context(directory, useSubdirectories, regExp)
directory: 要查找的文件路径
useSubdirectories: 是否查找子目录
regExp: 要匹配文件的正则

上述方法会返回一个对象
而在vite中是这样引入的
import.meta.globEager("../components/*.vue")
传入一个文件路劲然后用*通配符代表此目录下的每一个文件

通过上述语法就可以实现批量引入文件了，下面举一个使用小例子。

比如components文件夹下有很多组件，都需要引入注册再使用，那我们就可以使用批量引入的方式，然后批量注册。

工具函数

const componentsMoudle = import.meta.globEager("../components/*.vue")
const componentsMoudleObj = {}
Object.values(componentsMoudle).forEach(d=>{
    componentsMoudleObj[d.default.name] = d.default
})
export default componentsMoudleObj

父组件中引入这个工具js，并注册组件

  import componentsMoudle from './util/importComponents'
  import {defineComponent} from 'vue'
  export default defineComponent({
    components:{
      ...componentsMoudle,
    },
    setup() {
      console.log(componentsMoudle)
      return{

      }
    }
  })

这边可以自行答应一下componentsMoudle的内容。这里在使用过程中遇到了一点小坑，平时在components中都是直接写组建名就行了，久而久之都忘了其实components中也是需要一个键值对的，只不过key和value同名就简写成一个了。而我们批量引入进来的是一个没有key的对象，里面全部都是组件的内容。所以还需要在经过一次遍历，组装出一个keyvalue形式的对象，然后再放到父组件的components中才是注册成功了。