如何在Node.js包中访问浏览器全局window对象？

嘿，这个问题我在开发Web端npm包时经常碰到，给你分享几个实用的方案，从原生写法到工具包都有：

1. 原生环境判断（无依赖） #

这是最基础也最稳妥的方式，因为Node.js环境里不存在window对象，直接访问会抛出ReferenceError，所以先做个类型判断：

// 检查window是否存在，避免在Node环境报错
if (typeof window !== 'undefined') {
  // 在这里安全操作window对象
  const currentUrl = window.location.href;
  console.log('当前页面URL:', currentUrl);
}

这种写法不需要任何额外依赖，兼容性拉满，适合大多数场景。

2. 使用ES标准的globalThis（跨环境通用） #

ES2020引入了globalThis全局对象，它在浏览器环境中指向window，在Node.js中指向global，是跨环境获取全局对象的标准方案：

// 直接用globalThis替代window，自动适配环境
const globalObj = globalThis;

// 如果需要明确是浏览器环境的window
if (typeof globalObj.window !== 'undefined') {
  console.log('浏览器窗口宽度:', globalObj.innerWidth);
}

这种写法更简洁，不用单独判断环境类型，推荐给支持ES2020及以上的项目。

3. 借助打包工具注入环境标识 #

如果你用webpack或rollup这类打包工具，可以通过配置注入一个环境变量，明确区分浏览器和Node环境：
比如在webpack中使用DefinePlugin：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      __IS_BROWSER__: JSON.stringify(true)
    })
  ]
};

然后在你的包代码里就可以直接用这个变量判断：

if (__IS_BROWSER__) {
  // 放心访问window
  window.addEventListener('resize', () => {
    console.log('窗口大小变化了');
  });
}

这种方式适合你明确包只在Web端使用，但需要做环境隔离的场景。

4. 使用工具包简化操作 #

如果不想自己写判断逻辑，也有现成的工具包可以用，比如window-or-global：
首先安装包：

npm install window-or-global

然后在代码中引入使用：

const root = require('window-or-global');

// root在浏览器中就是window，Node中是global
console.log('当前环境全局对象:', root);

不过要注意，globalThis已经是ES标准了，这个工具包更多是为了兼容旧环境，如果你的目标环境支持ES2020+，其实没必要额外安装。

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