如何在使用 ES Modules 的 Node.js 应用中创建和使用 __dirname 和 __filename 这两个全局变量

在 Node.js 的 ES Modules (ESM) 环境中,传统的 CommonJS 全局变量 __dirname__filename 不再直接可用。这是因为 ES Modules 采用不同的模块解析策略,更加符合 ECMAScript 标准。因此,如果在使用 ES Modules 格式编写 Node.js 代码,需要使用不同的方法来获取当前模块的文件路径和目录路径。

这段代码演示了如何在使用 ES Modules 的 Node.js 应用中创建和使用 __dirname__filename 这两个全局变量:

javascript 复制代码
import { fileURLToPath } from 'url';  // 引入 url 模块的 fileURLToPath 方法
import { dirname } from 'path';      // 引入 path 模块的 dirname 方法

// 将当前模块的 URL (`import.meta.url`) 转换为本地文件系统路径,并赋值给全局变量 `__filename`
globalThis.__filename = fileURLToPath(import.meta.url);

// 使用 path.dirname 方法获取 __filename 的目录路径,并赋值给全局变量 `__dirname`
globalThis.__dirname = dirname(__filename);

代码详解

  1. import.meta.url:

    • 在 ES Modules 中,import.meta 是一个提供当前模块信息的对象,import.meta.url 返回当前模块的绝对 URL
    • 对于本地文件,这个 URL 会以 file:// 开头。
  2. fileURLToPath(import.meta.url):

    • fileURLToPath() 函数将 URL 字符串转换为对应的本地文件系统路径。这是必须的转换,因为文件系统 API(如 Node.js 的 fs 模块)需要文件路径而不是 URL。
  3. dirname(__filename):

    • dirname() 函数接受一个文件路径作为参数,返回该路径的目录部分。
    • 这里使用它来获取当前模块文件所在的目录路径。

全局变量设置

  • 通过设置 globalThis.__filenameglobalThis.__dirname,这段代码创建了与 CommonJS 环境中相同的全局变量。globalThis 是一个包含所有全局变量的全局对象,它在所有 JavaScript 环境中可用,包括浏览器和 Node.js。

使用场景

  • 这种设置通常用于需要在 ES Modules 环境中迁移或复用依赖于 __dirname__filename 的现有 Node.js 代码。
  • 它允许开发者在不大幅修改代码的情况下,使用模块路径相关功能,如读取相对路径的配置文件、访问相邻的模块或资源等。

通过这种方式,你可以在 Node.js 的 ES Modules 项目中,便捷地使用传统的目录和文件名路径变量,保持代码的可读性和可维护性。

相关推荐
逆旅行天涯5 分钟前
【Threejs】从零开始(六)--GUI调试开发3D效果
前端·javascript·3d
m0_7482552626 分钟前
easyExcel导出大数据量EXCEL文件,前端实现进度条或者遮罩层
前端·excel
web147862107231 小时前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247801 小时前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254881 小时前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
求知若饥1 小时前
NestJS 项目实战-权限管理系统开发(六)
后端·node.js·nestjs
ZJ_.1 小时前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营2 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis