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

__dirname 是commonjs规范的内置变量。如果使用了esm 是不会自动注入这个变量的。

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

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

// 方法一
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);
}

// 方法二
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 提供了一个模块的上下文信息。