Webpack打包JS文件时出现‘Window is not defined’错误求助

嘿，这个坑我踩过！Webpack在Node环境下打包的时候，确实没有浏览器里的window对象，第三方库直接硬引用它肯定会炸。给你几个实用的解决思路，按需挑就行：

1. 用Webpack的externals把库丢给CDN（最省心的场景） #

如果这个第三方库你是通过HTML里的CDN链接引入的，那完全可以让Webpack别打包它，直接用浏览器全局的window上的变量。

在你的webpack.config.js里加这段配置：

module.exports = {
  // 其他已有的配置...
  externals: {
    // 这里的键是你import时用的包名，值是window上挂载的库变量名
    'third-party-lib': 'window.thirdPartyLib'
  }
};

之后你在代码里正常import thirdPartyLib from 'third-party-lib'就行，Webpack会自动去浏览器全局找这个变量，打包时也不会再因为Node环境没window报错了。

2. 用DefinePlugin给打包环境补个“window” #

如果要把第三方库打包进项目里，可以用Webpack的DefinePlugin在编译时给window做个环境判断，让Node环境下用global（Node的全局对象）代替window，浏览器环境下就用真实的window。

配置示例：

const webpack = require('webpack');

module.exports = {
  // 其他已有的配置...
  plugins: [
    new webpack.DefinePlugin({
      window: typeof window !== 'undefined' ? 'window' : 'global'
    })
  ]
};

这样打包时Node环境就不会因为找不到window报错，浏览器运行时也能正常用真实的window。

3. 动态导入，避开Node环境的执行 #

你也可以在代码里手动判断环境，只在浏览器环境下才引入并使用这个第三方库，打包时Node环境根本不会执行到这段代码，自然不会报错。

代码示例：

// 只在浏览器环境下加载库
if (typeof window !== 'undefined') {
  const thirdPartyLib = require('third-party-lib');
  // 在这里使用第三方库的功能
}

如果用的是ES模块的动态导入，也可以写成：

async function loadThirdPartyLib() {
  if (typeof window !== 'undefined') {
    const { default: thirdPartyLib } = await import('third-party-lib');
    // 使用库
  }
}

4. 改第三方库的代码（如果有权限操作的话） #

要是这个库是你自己维护的，或者你能fork修改，那直接在库的代码里加个环境判断，替换掉所有直接引用window的地方：

// 用全局对象替代直接的window
const globalObj = typeof window !== 'undefined' ? window : global;
// 之后把库里面所有的window换成globalObj

你可以根据自己的场景选，比如如果这个库本来就是通过CDN加载的，那第一种方法最省事；如果要把库打包进项目里，那第二种或第三种都可以试试。

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