一. 解析
开发者使用一个模块时,有时需要知道模板本身的一些信息(比如模块的路径)。现在有一个提案,为 import 命令添加了一个元属性
import.meta
,返回当前模块的元信息。
import.meta
只能在模块内部使用,如果在模块外部使用会报错。
这个属性返回一个对象,该对象的各种属性就是当前运行的脚本的元信息。具体包含哪些属性,标准没有规定,由各个运行环境自行决定。一般来说,import.meta
至少会有下面两个属性。
(1)import.meta.url
import.meta.url
返回当前模块的 URL 路径。举例来说,当前模块主文件的路径是https://foo.com/main.js
,import.meta.url
就返回这个路径。如果模块里面还有一个数据文件data.txt
,那么就可以用下面的代码,获取这个数据文件的路径。
new URL('data.txt', import.meta.url)
注意,Node.js 环境中,import.meta.url
返回的总是本地路径,即是file:URL
协议的字符串,比如file:///home/user/foo.js
。
(2)import.meta.scriptElement
import.meta.scriptElement
是浏览器特有的元属性,返回加载模块的那个<script>
元素,相当于document.currentScript
属性。
// HTML 代码为
// <script type="module" src="my-module.js" data-foo="abc"></script>
// my-module.js 内部执行下面的代码
import.meta.scriptElement.dataset.foo
// "abc"
二. 应用
1. 动态环境变量:基于Vite和Rollup插件系统,import.meta.env
能够自动将.env
文件的值注入到你的代码中。
- 根目录下新建
.env(默认环境),.env.development
和.env.production
NODE_ENV = "development"
VITE_BASE_URL = "http://127.0.0.1:3333"
- 通过 import.meta.env.VITE_BASE_URL 读取环境变量的参数
- import.meta.env.MODE: {string}应用程序运行的模式。
- import.meta.env.BASE_URL:{string}应用程序提供服务的基础url。这由基本配置选项决定。
- import.meta.env.PROD: {boolean}是否在生产环境中运行
- import.meta.env.DEV: {boolean}应用是否在开发中运行(总是与import.meta.env.PROD相反)
2.import.meta.glob()
是一个 ES 模块的特殊属性,用于动态导入多个模块
- import.meta.glob() 方法接受一个模式字符串作为参数,并返回一个Promise,该Promise 析为一个对象,该对象包含匹配该模式的所有模块的键值对。
- 模式字符串可以包含通配符 *,用于匹配多个模块。例如,import.meta.glob('./modules/*.js') 可以匹配当前目录下以 .js 结尾的所有模块。
- 使用 import.meta.glob() 可以方便地批量导入模块,而不需要手动一个一个地导入。
需要注意的是,
import.meta.glob() 是 ES 模块的特性,
目前仅在一些现代浏览器和支持 ES 模块的 Node.js 版本中可用,
在旧的浏览器或 Node.js 版本中,可能需要使用其他方式来实现类似的功能
在这里,使用import.meta.glob(),导入指定模式的固定路由模块,代码如下:
/** 自动导入全部静态路由,无需再手动引入!匹配 src/router/modules 目录(任何嵌套级别)中具有 .ts 扩展名的所有文件,如果需要做排除,请使用'!'符号,例如:!./modules/**
* 如何匹配所有文件请看:https://github.com/mrmlnc/fast-glob#basic-syntax
* 如何排除文件请看:https://cn.vitejs.dev/guide/features.html#negative-patterns
*/
// 导入非result相关路由
const fixedModules = import.meta.glob('./modules/**/!(result).ts', { eager: true })
// 导入result相关路由
const resultModules = import.meta.glob('./modules/**/result.ts', { eager: true })
//导入所有路由
const modules: Record<string, any> = import.meta.glob(['./modules/**/*.ts'], { eager: true })
模式字符串 ./modules/**/!(result).ts 解析如下:
- ./modules/:表示要匹配的文件路径的起始部分,
- **/:表示可以匹配任意多层子目录,
- !(result):表示排除匹配到的文件名为result的文件,
- .ts:表示文件扩展名为.ts
- { eager: true }参数表示立即加载这些模块