vite中的import.meta属性

1.介绍

import.meta是 ECMAScript 模块（ES Module）中的一个特殊的全局变量，它提供了一种在模块内部获取与当前模块相关的元信息（metadata）的方式。这个特性是在 ES2020（即 ES11）中正式成为标准的。

import.meta是一个对象，它包含关于当前模块的上下文信息。在不同的环境中（比如浏览器、Node.js 或构建工具中），import.meta对象可能包含不同的属性，但它的基本用途是一致的：提供模块自身的元数据。

常用方法

import.meta.url

它返回当前模块的完整web的URL。node返回操作系统的路径。

js 复制代码

console.log(import.meta.url); // 假设这个模块的地址是：https://example.com/js/module.js

2.vite二次封装

vite通过对这些属性是由工具注入的，用来提供开发环境相关的功能。其实都是语法糖。真正运行时已经被转化成其他代码

import.meta.env

访问 .env*文件中以 VITE_开头的环境变量

使用

.env

js 复制代码

VITE_APP_TITLE=MyApp
VITE_API_URL=https://api.example.com

js 复制代码

console.log(import.meta.env.MODE); // 'development' 或 'production'
console.log(import.meta.env.VITE_APP_TITLE); // 自定义变量，需在 .env 文件中定义：VITE_APP_TITLE=MyApp

原理实现

读取 .env*文件
提取所有以 VITE_开头的变量
生成一个 客户端可用的全局 JavaScript 对象，例如：

js 复制代码

 const env = {
      MODE: 'development',
      VITE_APP_TITLE: 'MyApp',
      VITE_API_URL: 'https://api.example.com',
    };

在代码转换阶段，Vite 会把你的源码转化为上面env对象的值

js 复制代码

console.log(import.meta.env.VITE_APP_TITLE);
// 转化为：
console.log(env.VITE_APP_TITLE);

import.meta.glob

根据 glob 模式批量导入模块，返回动态 import()映射

使用

js 复制代码

const modules = import.meta.glob('./components/*.vue');

原理实现

当 Vite 加载一个包含 import.meta.glob(...)的模块时，Vite 的插件（如 importMetaGlob）会拦截该模块代码，将 glob 替换为静态对象

js 复制代码

const modules = import.meta.glob('./components/*.vue');
// 转化成 
const modules = {
  './components/Button.vue': () => import('./components/Button.vue'),
  './components/Input.vue': () => import('./components/Input.vue'),
};

import.meta.hot

提供热更新相关 API，支持模块热替换，无需刷新页面

使用

js 复制代码

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    console.log('模块被热更新了！', newModule);
  });
}

原理

Vite 的热模块替换（HMR）功能是基于 WebSocket+ 自定义协议实现的，不同于 Webpack 的 HMR。当你启用 dev server 后，Vite 会在后台建立 WebSocket 连接，监听文件变化。
如果你的模块使用了 if (import.meta.hot) { ... }，Vite 会在开发阶段通过插件转换，将 import.meta.hot注入为一个可用的 HMR API 对象，提供方法如：

js 复制代码

import.meta.hot.accept()
import.meta.hot.dispose()

实现

Vite 内置的 vite:hot插件（或相关 HMR 插件）会在代码转换时：检测你是否使用了 import.meta.hot
注入一个预定义的 HMR 客户端运行时对象，让你可以监听模块更新事件
通过 WebSocket 与 dev server 通信，实现局部刷新，无需整页重载