学习前端开发的同学们应该都知道 ES6 中引入了模块化，通过 import 和 export 实现模块化开发。而在 ES2020 中，新增了一个属性 import.meta，它提供了一种获取模块相关信息的途径，本篇文章将深入讲解 import.meta 的相关知识。
import.meta 的作用
import.meta 是一个包含了当前模块相关信息的对象，它是一个只读的对象。我们可以通过 import.meta 来访问当前模块的 URL、编译器标志和其他元数据等信息，以及导入的变量和函数。
下面是一个示例代码，展示了如何使用 import.meta 获取当前模块的 URL：
console.log(import.meta.url);
在 Chrome 浏览器中运行上述代码，将会打印该模块的 URL，如下所示：
"file:///Users/xxxxx/Documents/demo.js"
在 Node.js 环境中运行上述代码，则会输出模块的绝对路径。
使用示例： 动态导入
ES6 中支持静态导入，而 ES2020 中新增了动态导入，动态导入允许我们在运行时动态地加载模块。同时，我们也可以使用 import.meta.url 动态获取要加载的模块路径。
下面是一个使用动态导入和 import.meta.url 的示例代码：
const moduleUrl = new URL("http://example.com/modules/my-module.js")
const response = await import(moduleUrl)上述代码中，我们将要导入的模块路径通过 URL 进行封装。并通过 import() 方法异步地导入该模块。这样做的好处是，可以根据 import.meta.url 动态地获取要导入的模块路径。
核心特性： 与构建工具的结合
import.meta.url 的另一个用途是与构建工具结合使用。在开发环境中，我们可以使用 import.meta.url 获取源文件的路径，并将其传递给构建工具，以便构建工具在构建过程中进行处理。
例如，下面的示例代码展示了使用 import 语句导入 JSON 文件，并且使用了 import.meta.url 获取该 JSON 文件的路径：
import jsonData from './data.json';
import {readFileSync} from 'fs';
const jsonPath = new URL('./data.json', import.meta.url).pathname;
const jsonContent = readFileSync(jsonPath, 'utf-8');
console.log(jsonContent);上述代码中，我们首先通过 import 导入了一个 JSON 文件，并获取了这个 JSON 文件的内容。然后，通过 import.meta.url 获取该 JSON 文件的绝对路径，并将其传递给了 Node.js 中的 readFileSync 方法来读取文件内容。
总结
import.meta，作为 ES2020 新增的核心特性，提供了一种获取模块相关信息的途径，例如获取模块的 URL、编译器标志和其他元数据等信息，以及导入的变量和函数。这些功能使得我们能够更加方便地管理模块，同时也为我们在使用构建工具时提供了更多的可能性。与此同时，我们也要了解到 import.meta 只是一个只读的对象，不允许修改。在实际项目开发中，我们可以灵活应用 import.meta 的特性，以提高代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645d37ff968c7c53b0fbd1cc