Vite从入门到精通（五）glob import

使用场景：例如我们的项目中的 api接口是分模块的，用户相关的API接口封装在 user.js里，权限相关的API接口封装在 auth.js里，系统相关的API接口封装在即 sys.js里，以后项目功能增加了，还会增加后续相关的各种模块的js，如果我们在一个页面中用到了很多模块的接口，一个个导入是不是非常麻烦，这时候vite提供的 glob import就派上用场了。

1、例子

例如我们的项目中有这些api的js

这时候，我们如果想一次性全部引入这些js怎么办呢？答案就是我们刚刚说的glob import。

• 代码演示

const globModules =import.meta.glob('./api/*.js')
console.log(globModules)

• 输出结果

  
  
• 我们可以看到，输出了对应的js目录及其要import的语句的{key，value}的对象,我们可以直接通过Object.entries拿到相应的key和value

Object.entries(globModules).forEach(
    ([k, v]) => {
        console.log(k + ':' + v)
    }
)

我们发现，这时候的value是一个函数，所以我们需要在打印的时候执行下这函数

Object.entries(globModules).forEach(
    ([k, v]) => {
        v().then(m => {
            console.log(k + ':' + m.default)
        })
    }
)

2、引入文件格式筛选

我们在上面使用glob的使用是这样的import.meta.glob('./api/*.js')
import.meta.glob('./api/支持vite规定的格式筛选.js')

• *.js：代表api目录下所有的.js文件，例如还可以用*.json、*.ts，都是一个道理。
• *-[0-9].js：代表api目录下所有以‘-’开头+ 1到9数字的.js文件，例如就是api目录下的test-1.js这个文件

还要很多类似于正则的规则，大家可以去看fast-glob的官网，vite里其实就是集成了fast-glob这个插件。

3、globEager的使用

vite会直接帮助我们导入对应的js

const globModules =import.meta.globEager('./api/*.js')

console.log(globModules)

我们可以看到，会打印出对应的js及其Module，然后我们在看vite编译后的代码

可以看到vite会直接帮我们导入对应的Module，不需要我们自己去执行对应的函数了。

4、总结

glob import是vite自带的语法功能，如果你的项目中用的是其他构建工具，例如webpack，是不能使用包含glob import功能的代码的。所以大家要注意。