如何声明自定义logger函数为全局对象实现跨文件免导入调用

你遇到的跨文件访问不到全局挂载属性的问题，核心原因一般有两个：一是挂载逻辑没有在所有业务代码加载前执行，模块加载顺序靠后导致其他文件调用时属性还未定义；二是不同运行时全局对象不统一，用了环境特定的全局API导致上下文隔离。以下是不同场景下可直接落地的方案：

方案1：原生运行时通用方案（无构建工具依赖） #

所有JS运行时（Node.js、浏览器、Web Worker）都兼容标准全局对象globalThis，不要单独用Node的global或者浏览器的window做跨环境挂载。

1. 找到项目的顶层入口文件（就是应用启动时第一个被执行的文件，比如Node服务的main.js/app.js、前端项目的index.js入口），在文件最顶部、所有其他业务代码导入/执行前，完成logger挂载：

// 入口文件最顶部，先执行挂载逻辑
import myLogger from './utils/logger' // CommonJS环境用require即可
globalThis.logger = myLogger

// 挂载完成后再写其他启动逻辑，比如导入路由、启动服务、挂载DOM等

2. 后续所有业务文件里直接调用logger.info('xxx')即可，不需要写任何import/require语句。

注意：绝对不要把挂载逻辑写在被路由、业务模块异步/懒加载的文件里，这类文件执行时机晚于业务代码加载，必然会出现访问不到的问题。

方案2：工程化项目推荐方案（构建工具自动注入） #

如果项目用Vite、Webpack等构建工具，不需要手动挂载全局对象，通过构建配置可以实现自动注入，还能避免全局命名空间污染：

• Vite项目：在vite.config.js中添加define配置，直接把logger映射为全局可用值：

import { defineConfig } from 'vite'
import path from 'node:path'

export default defineConfig({
  define: {
    logger: path.resolve(__dirname, './src/utils/logger/index.js')
  }
})

• Webpack项目：用内置的ProvidePlugin做自动注入：

const webpack = require('webpack')
const path = require('node:path')

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      logger: path.resolve(__dirname, './src/utils/logger/index.js')
    })
  ]
}

配置完成后全项目直接调用logger即可，构建时会自动替换为正确的引用，不需要手动导入，也不会污染全局运行时对象。

TypeScript 类型适配 #

如果是TS项目，全局调用logger时IDE会报“找不到名称logger”的类型错误，在项目根目录新建global.d.ts文件添加如下声明即可：

import type MyLogger from './src/utils/logger'
declare global {
  const logger: typeof MyLogger
}
export {}

配置后可以正常拿到logger的所有类型提示，不会报编译错误。

常见踩坑说明 #

• 单测环境（比如Jest、Vitest）需要在测试框架的setup启动文件里提前挂载logger，否则单测文件中访问会报undefined
• 如果是浏览器端用普通script标签引入脚本，需要把挂载logger的script标签放在所有业务脚本的最前面，不要加async/defer属性打乱执行顺序
• 不要在模块内部声明和全局logger同名的局部变量，会覆盖全局引用导致逻辑异常

内容的提问来源于stack exchange，提问作者user17014580