Vite 的 Glob 导入

邮箱：291148484@163.com
CSDN主页：jclee95: https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
本文地址：https://blog.csdn.net/qq_28550263/article/details/121987350

【内容简介】在 Vite 中有一个特殊的导入方式，即我们今天打算讨论的 Glob 导入。这种导入弥补完善了JavaScript导入体系中不能同时导入到某个文件目录的多个文件的缺陷。

1. 回顾 JavaScript `import`

JavaScript 模块是声明性的，模块之间的关系是根据文件级别的导入和导出来指定的。模块中声明的变量、函数、类等在模块外是不可见的模块依赖于import和 export。

如果想要导入，那么以为着你必须先在一个文件中导出，如：

export const numberRegexp = /^[0-9]+$/;

静态导入可以用以下方式来表达：

import "module-name";
import { export1 , export2 } from "module-name";
import defaultExport from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import * as name from "module-name";
import defaultExport, * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";

你也可以动态加载模块，这需要一个import()函数。它返回一个 promise，它用一个模块对象来实现。如：

import('/modules/myModule.js').then(module => {...}).catch(err => {...});// 也可以用 await
let module = await import('/modules/myModule.js');

这些基于JavaScript的导入方法用起来有一个缺点，就是无法监视目录文件的变化。在开发中我们如果能将一个目录是为一个整体进行导入，那么该目录中的所有子目录与文件就可以有层级的获取，而不是一个一个写在道路路径里如'/modules/myModule.js'。
比如Python的著名重量型Web框架Dajngo，其一个子应用就是以一个目录为整体的模块进行组织的，这当然要求一次能够导入一个目录并能够区分目录中的层级。

2. Glob 导入即基本使用与原理

Glob 导入即Vite中提供的 import.meta.glob() 和 import.meta.globEager() 导入函数。 Glob 导入可以导入目录中的所有文件/目录，也可以对文件/目录进行匹配筛选。
会被当成导入标识符：必须是相对路径（以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析）。

2.1 `glob()`导入函数

glob()导入函数指的是 import.meta.glob() ，这种导入是动态导入，匹配到的文件默认是懒加载的。因此如果你使用该导入，自然如果被导入的某个模块中具体代码有错误页不会被抛出。

现在有一个目录如下：

我们在另外一个位置建立一个文件，相对目录表示该路径为'./test/，现在我们尝试以下几种方法看看导入完成了什么事情：

（1）所有当前目录层级下的文件

export const modules = import.meta.glob('./test/*')

这里我们使用了通配符来匹配所有的文件。但是这不会包含其中的目录。
展开后可以看到：

{./test/b.ts: ƒ, ./test/c.ts: ƒ, ./test/d.ts: ƒ}
./test/b.ts: () => import("/src/test/b.ts")
./test/c.ts: () => import("/src/test/c.ts")
./test/d.ts: () => import("/src/test/d.ts?t=1639678566331")

因为，import.meta.glob(‘./test/*’)相当于在上面被转译成了以下代码：

const modules = {'./test/b.ts': () => import("/src/test/b.ts"),'./test/c.ts': () => import("/src/test/c.ts"),'./test/d.ts: ()' => import("/src/test/d.ts")
}

显然，这时以模块的相对路径作为“键”，导入的内容整体作为为响应你可以遍历 modules 对象的 key 值来访问相应的模块：

for (const path in modules) {modules[path]().then((mod) => {console.log(path, mod)})
}

（2）所有当前目录层级下特定类型的文件

export const modules = import.meta.glob('./test/*.ts')

2.2 `globEager()`导入函数

globEager()导入函数是指 import.meta.globEager() 。从功能上来看，它与glob()函数几乎完全一样。但是这中导入是静态的，它将在你掉用该函数时直接引入所有的模块。

这意味这，如果你在一次性导入所有模块时，这些某块都将被加载，且要求所有模块在语法上时正确的，否则将抛出错误。
还是刚才的目录：

export const aaa = import.meta.globEager('./test/*.ts')

可以清楚的看到有一个最明显的区别时，各个模块被立即导入进来作为以各自相对路径为键的值。
这种方式将被转换成如下代码：

// vite 生成的代码
import * as __glob__0_0 from './test/b.ts''
import * as __glob__0_1 from './test/c.ts''
import * as __glob__0_2 from './test/d.ts''
const modules = {'./test/b.ts'': __glob__0_0,'./test/c.ts'': __glob__0_1,'./test/db.ts'': __glob__0_2,
}

3. 示例：通过Glob 导入子目录特定文件

这时一个简单的例子。由于在之前的例子中我们看到，导入没有将文件系统中的目录带进来，而只有文件的键值对，似乎不能同时处理所有子目录中的文件，其实不然。
现在我们动态导入test所有子目录中的文件：

export const aaa = import.meta.glob('./test/*/*')

仅此小例启发诸君。

好用的import： Vite的Glob 导入相关推荐

踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias
2021.8.12 坑50(vue-router4.addRoute().router.options.routes未更新):进行动态权限获取菜单的设置,使用了addRoute()来添加路由,但是ro ...
Vue3使用路由及配置vite.alias简化导入写法
文章目录一.使用路由 1)安装vue-router 2)注册路由 3)使用路由二.配置vite.alias简化导入写法 1)安装`@types/node` 2)修改vite.config.ts 3 ...
Vue3+TS+Vite无法使用require导入图片的解决方法
Vue3+TS+Vite无法使用require导入图片的解决方法问题描述, 当使用const xxx = require('xxx')浏览器会报错, 为啥使用vue-cli脚手架时不会出问题? 是因 ...
import的用法python_Python导入模块，Python import用法（超级详细）
Python导入模块,Python import用法(超级详细) 使用 Python 进行编程时,有些功能没必须自己实现,可以借助 Python 现有的标准库或者其他人提供的第三方库.比如说,在前面章 ...
python import 路径_python import 上级目录的导入
python import 上级目录的导入,路径,上级,文件,目录,递归 python import 上级目录的导入易采站长站,站长之家为您整理了python import 上级目录的导入的相关内容 ...
python导入上级目录下文件_python import 上级目录的导入
python import 上级目录的导入有时候我们可能需要import另一个路径下的python文件,例如下面这个目录结构,我们想要在_train.py里import在networks目录下的_l ...
php 如何封装类库,ThinkPHP里的import方法用于类库导入的封装实现实例详解
ThinkPHP里的import方法用于类库导入的封装实现实例详解分类:PHP_Python| 发布:佚名| 查看: | 发表时间:2014/7/1 import方法是ThinkPHP框架用于类库导 ...
Neo4j:使用neo4j-admin import方式将数据导入neo4j
我的neo4j版本是4.4.16,社区版这里数据使用actors.csv.movies.csv.roles.csv,格式如下: actors.csv person:ID,name,:LABEL ke ...
import 和from... import的作用，导入模块or导入函数
import 与 from-import 在 python 用 import 或者 from...import 来导入相应的模块.将整个模块(somemodule)导入,格式为: import som ...

好用的import： Vite的Glob 导入

1. 回顾 JavaScript `import`

2. Glob 导入即基本使用与原理

2.1 `glob()`导入函数

（1）所有当前目录层级下的文件

（2）所有当前目录层级下特定类型的文件

2.2 `globEager()`导入函数

3. 示例：通过Glob 导入子目录特定文件

好用的import： Vite的Glob 导入相关推荐

最新文章

热门文章

好用的import： Vite的Glob 导入

1. 回顾 JavaScript import

2. Glob 导入即基本使用与原理

2.1 glob()导入函数

（1）所有当前目录层级下的文件

（2）所有当前目录层级下特定类型的文件

2.2 globEager()导入函数

3. 示例：通过Glob 导入子目录特定文件

好用的import： Vite的Glob 导入相关推荐

最新文章

热门文章

1. 回顾 JavaScript `import`

2.1 `glob()`导入函数

2.2 `globEager()`导入函数