如何在Vite中让导入模块的this指向window以兼容旧依赖？

针对你遇到的旧依赖因this指向undefined导致的报错，有以下几种可行方案：

方案一：通过Esbuild配置强制this指向window #

在vite.config.js中添加Esbuild全局定义配置，将依赖中的this直接映射为window：

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

该配置会在预构建依赖时自动替换this为window，适配旧依赖的非严格模式写法。

方案二：将依赖打包为IIFE格式 #

IIFE（立即执行函数表达式）环境中this默认指向window，可让Vite用Esbuild将目标依赖打包为IIFE格式：

export default {
  optimizeDeps: {
    include: ['你的旧依赖包名'],
    esbuildOptions: {
      format: 'iife'
    }
  }
}

注意替换你的旧依赖包名为实际依赖名称，比如jquery这类传统库常用这种方式处理。

方案三：直接用script标签引入依赖 #

绕开ES模块的严格模式限制，在index.html中用传统<script>标签引入依赖：

<script src="/node_modules/你的旧依赖包/dist/xxx.js"></script>

这种方式下依赖会在全局作用域执行，this自然指向window，之后可直接通过window.variable访问挂载的变量。

方案四：手动注入全局this的polyfill #

在项目入口文件（比如main.js）最顶部添加代码，提前修正全局this指向：

// 先处理全局上下文
if (typeof globalThis === 'undefined') {
  window.globalThis = window;
}
// 再导入旧依赖
import '你的旧依赖包名';

这种方式适合依赖本身依赖globalThis的场景，确保导入前全局上下文已被修正。

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