Vite从入门到精通(五)glob import

lxf2023-06-29 17:00:01

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

1、例子

例如我们的项目中有这些api的js Vite从入门到精通(五)glob import

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

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

  • 输出结果 Vite从入门到精通(五)glob import
  • 我们可以看到,输出了对应的js目录及其要import的语句的{key,value}对象,我们可以直接通过Object.entries拿到相应的keyvalue
Object.entries(globModules).forEach(
    ([k, v]) => {
        console.log(k + ':' + v)
    }
)

Vite从入门到精通(五)glob import 我们发现,这时候的value是一个函数,所以我们需要在打印的时候执行下这函数

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

Vite从入门到精通(五)glob import

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)

Vite从入门到精通(五)glob import 我们可以看到,会打印出对应的js及其Module,然后我们在看vite编译后的代码 Vite从入门到精通(五)glob import 可以看到vite会直接帮我们导入对应的Module,不需要我们自己去执行对应的函数了。

4、总结

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

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 除此之外,本网站还拥有一个活跃的社区,您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信,社区的力量可以帮助您更好地成长和进步。 在本网站中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!