当前位置：首页 > news >正文

浅谈vite之import.meta

news 2025/7/17 10:09:33

一. 解析

开发者使用一个模块时，有时需要知道模板本身的一些信息（比如模块的路径）。现在有一个提案，为 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 解析如下：