Vite构建时IIFE中的this为undefined问题的解决咨询

问题根源 #

Vite默认以ESM规范处理模块，ESM环境下顶级作用域的this是undefined；而CRA使用的Webpack会将CommonJS/IIFE格式的依赖包裹在浏览器全局上下文执行，此时this指向window。你遇到的间接依赖代码依赖this指向全局window，所以在Vite中报错。

具体解决方案 #

方案1：针对特定依赖替换代码（推荐）

使用@rollup/plugin-replace修改该依赖的问题代码，无需全局修改：

1. 安装插件：

npm install @rollup/plugin-replace --save-dev

2. 在vite.config.js中配置：

import replace from '@rollup/plugin-replace';

export default {
  plugins: [
    replace({
      // 匹配你的间接依赖文件，替换路径中的`your-indirect-dependency`为实际依赖名
      include: /node_modules\/your-indirect-dependency\/.*\.js$/,
      // 把问题代码中的`var window = this`替换为直接引用全局window
      'var window = this': 'var window = window',
      preventAssignment: true
    })
  ]
};

方案2：全局设置this为window（简单但可能影响全局）

如果该依赖是唯一有问题的模块，可以直接在Vite配置中全局定义this指向window：

export default {
  define: {
    'this': 'window'
  }
};

注意：这种方式会影响所有模块的this指向，可能引发其他潜在问题，谨慎使用。

方案3：通过esbuild预构建时修改this指向

在Vite的预构建阶段，用esbuild指定this的指向：

export default {
  optimizeDeps: {
    esbuildOptions: {
      define: {
        this: 'window'
      }
    }
  }
};

这个方案会让所有预构建的CommonJS模块转换时this指向window，比方案2更精准，但仍会影响一批模块。

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