ES模块和commonJS两种标准下中实现__dirname
一、CommonJS
1. 内置全局变量，直接使用
无需导入任何模块，文件内原生存在 __dirname / __filename
js
// webpack.config.cjs / index.js（CJS）
const path = require('path');
// 当前文件所在文件夹绝对路径
console.log(__dirname);
// 当前文件完整绝对路径
console.log(__filename);
module.exports = {
output: {
path: path.resolve(__dirname, 'dist')
}
};二、ESM
方式 1：兼容全 Node 版本
依赖内置 url + path 模块，import.meta.url 是文件自带 file:// 协议地址
js
// webpack.config.js（ESM）
import path from 'path';
import { fileURLToPath } from 'url';
import { dirname } from 'path';
// 把 file:// 链接转为本地文件绝对路径,这里取__filename1,避免混淆
const __filename1 = fileURLToPath(import.meta.url);
// 从文件路径取出所在目录 = __dirname
const __dirname = dirname(__filename1);
export default {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist')
}
};方式 2：Node 20.11+ 简化写法
Node20 新增 import.meta.dirname 语法糖，直接等价上面整套代码
js
import path from 'path';
const __dirname = import.meta.dirname;
export default {
output: {
path: path.resolve(__dirname, 'dist')
}
};两种规范对比表
ES模块和commonJS两种标准下中实现__dirname
http://localhost:8090/archives/esmo-kuai-he-commonjsliang-zhong-biao-zhun-xia-zhong-shi-xian__dirname