import.meta.glob的使用

前言

在vite中,官方提供了一个api  import.meta.glob,这个方法可以理解为将文件系统模块化.

作用场景类似于vuex的模块化,因为数据和方法较多,我们可以分类存储在不同文件当中,当需要收集的时候,就可以使用这个api

使用

在vite项目中的src文件夹内创建一个文件夹selfTest,里面存放三个文件

files1.ts

export default{
  name:'数据1',
  list:[
    '北京','沈阳','哈尔滨','张家口'
  ]
}

files2.ts

let num:number = 1
let str:string = '数据2'
let arr:Array = ['成都,贵阳,昆明,康定']
export default {
    name:str,
    list:arr,
    num
}

files3.ts

export let data1:string = '温州'
export let data2:string = '杭州'
export let data3:string = '南京'
export let data4:string = '上海'

在main.ts中使用如下

interface FileModule {
  default: any;
}
const moduleTest = import.meta.glob('./selfTest/**/*.ts',{eager:true})
console.log(moduleTest,'文件模块汇总')
//数据合并处理
let getAllListHandler = (moduleData)=>{
  let List:any[] = []
  for(let item in moduleData){
    if(moduleData[item].default){
     List = List.concat(moduleData[item].default.list)
    }else{
      // moduleData[item].forEach((val:string)=>{
      //   List.push(val)
      // })
      for(let val in moduleData[item]){
        List.push(moduleData[item][val])
      }
    }
  }
  return List
} 
let allList = getAllListHandler(moduleTest)
console.log(allList,'最后拿到的数据')

结果如下