vite批量导入文件，并且注册全局控件

记录下vite中如何批量导入文件

在webpack中批量导入文件

const modulesFiles = require.context('./modules', true, /\.vue$/)

我使用的是vite+ts+vue3

vite中导入批量文件，新建文件 glot.ts

import { App, Component } from 'vue'

interface FileType {
    [key: string]: Component
}

// 导入 globComponents 下面的 所有 .vue文件
const files: Record<string, FileType> = import.meta.globEager("/src/components/golbComponents/*.vue")

export default (app: App): void => {
    // 因为通过 import.meta.globEager 返回的列表不能迭代所以直接使用 Object.keys 拿到 key 遍历
    Object.keys(files).forEach((c: string) => {
        const component = files[c]?.default
        // 挂载全局控件
        app.component(component.name as string, component)
    })
}

定义 glob.ts 之后在 main.ts 中导入

// ....
// 导入 （@components 是定义的别名）
import glob from '@components/golbComponents/index'

// 拿到创建的 app 实例挂载即可
glob(app)

最后就可以直接使用全局组件啦~ 不用再导入~

多层级文件导入

const files: Record<string, FileType> = import.meta.globEager("/src/components/golbComponents/**/*.vue")

_vite的 Glob 匹配是使用 fast-glob 来实现的 _
vite文档
fast-glob文档