import.meta 对象-前端队长の技术博客

import.meta 对象是一个特殊的对象，对每个模块都是唯一的，可以携带关于当前模块的元数据。import.meta 的内容由宿主环境（Node.js 或 Web 浏览器）定义。

获取模块的元数据

通过 import.meta，可以访问包含有关当前模块的元数据的对象。这些元数据可以包括模块的 URL、模块的导入信息、模块的环境变量等。通过这些元数据，开发人员可以在运行时了解和操作模块的相关信息。

import.meta.url 属性提供了当前模块文件的 URL 信息。这对于动态加载资源、按需加载模块、构建工具等场景非常有用，可以方便地获取当前模块的位置信息。在浏览器环境中，import.meta.url 包含当前模块的绝对 URL。在 Node.js 环境中，import.meta.url 提供了模块的绝对路径，前缀为 file://。

在条件代码路径中使用 import.meta

import.meta 在条件代码路径中发挥重要作用。通过检查 import.meta 对象的属性，可以根据不同的环境、构建选项或条件进行不同的代码处理，从而实现更灵活的模块化开发。

if (import.meta.url) {
  console.log('Running as a module');
} else {
  console.log('Running as a script');
}

热更新 (HMR)

在前端开发领域，热更新（HMR）是一个强大的功能，可以在不刷新整个页面的情况下替换模块。这在开发过程中特别有用，因为它可以在更改时保持应用程序的状态。

import.meta 可以用来实现 HMR。例如，在 Vite 构建工具中，import.meta.hot 正是为此目的而提供的。下面是一个关于如何使用它的基本例子：

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // Perform some action with the new module...
  });
}

在这个片段中，import.meta.hot.accept() 被用来注册一个回调函数，当模块被替换时就会执行。