解决vite.config.js无法使用__dirname的问题

vite.config.js无法使用__dirname

__dirname 是 commonjs 规范的内置变量。

如果使用了 esm 是不会自动注入这个变量的。

在 commonjs 中，注入了 __dirname ， __filename , module , exports , require 五个内置变量用于实现导入导出的能力。而在 esm 中实现方式是不一样的。

在 esm 中，显然模块的导入导出使用 export/import ，自然不会再用 exports/require ，同理 __dirname ， __filename 也有对应的写法。

方法一

首先，使用 node:url 模块中的URL和 fileURLToPath 函数对URL进行解析和转换。

然后，使用URL构造函数的第一个参数传入"."，即当前目录的相对路径，再结合 import.meta.url 来获取当前目录的URL。

最后，使用 fileURLToPath 函数将URL转换为文件路径，从而获取所需的 __dirname

// 方法一
import { URL, fileURLToPath } from "node:url";
// 获取__filename
function getCurrnetFile () {
    return fileURLToPath(import.meta.url);
}
// 获取__dirname
function getCurrnetDir () {
    const url = new URL(".", import.meta.url);
    return fileURLToPath(url);
}

方法二

这种方法使用了 node:path 模块中的 dirname 函数和 node:url 模块中的 fileURLToPath 函数。

首先，使用 fileURLToPath 函数将 import.meta.url 转换为文件路径，获取当前文件的路径 __filename 。

然后，使用 dirname 函数将文件路径转换为所在目录的路径 __dirname ，从而得到了 __dirname 。

// 方法二
import { dirname } from "node:path";
import { fileURLToPath } from "node:url";
// 获取__filename
function getCurrnetFile () {
    return fileURLToPath(import.meta.url);
}
// 获取__dirname
function getCurrnetDir () {
    const __filename = fileURLToPath(import.meta.url);
    const __dirname = dirname(__filename);
    return __dirname;
}

可以看到使用了一个关键API import.meta.url ，其实 import.meta 是 ECMA 规范的一部分：

The import.meta object exposes context-specific metadata to a JavaScript module.

It contains information about the module, like the module’s URL.

言下之意， import.meta 提供了一个模块的上下文信息。

总之，以上两种方法都是在ESM中模拟获取 __dirname 的功能。

它们利用 import.meta.url 获取模块的URL，然后使用相关的Node.js内置模块对URL或文件路径进行解析，从而得到当前模块所在的目录路径

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。