type:module严格模式下webpack如何配置旧库this指向window

不需要修改第三方库源码，也不需要全局禁用ES模块严格模式，仅对目标老旧库单独做上下文修补即可，不会影响其他业务代码的正常运行。

最优方案：使用官方imports-loader绑定指定模块的顶层this #

imports-loader是webpack官方维护的标准loader，专门用于调整模块的执行上下文、补全全局依赖，适配成本最低。

• 安装开发依赖

npm install imports-loader --save-dev

• 添加webpack规则
  在webpack配置的module.rules数组中，新增一条精准匹配目标旧库的规则：

module.exports = {
  // 保留项目原有其他webpack配置
  module: {
    rules: [
      {
        // 路径匹配规则：示例为匹配node_modules目录下对应旧库包的所有js文件，替换包名为你实际引入的旧库名即可
        test: /[\\/]node_modules[\\/]这里替换为你的老旧第三方库包名[\\/].*\.js$/,
        use: [
          {
            loader: 'imports-loader',
            options: {
              // 核心配置：将该模块的顶层this强制绑定为window
              this: 'window'
            }
          }
        ]
      }
      // 保留项目原有其他loader规则，不需要改动
    ]
  }
}

• Angular CLI项目适配提示
  如果你的Angular2项目是基于Angular CLI初始化的，默认不会暴露原生webpack配置，不需要执行eject弹出配置，只需要安装@angular-builders/custom-webpack构建器，将上述规则写入自定义webpack配置文件，再修改angular.json中的构建选项指向该自定义配置即可。

配置说明 #

该loader会在匹配到的旧库代码外层包裹一层作用域，手动将作用域内的this绑定为window，仅对单独匹配的模块生效，完全不会影响其他业务模块的ES模块严格模式执行逻辑。不要为了适配单个旧库全局移除package.json中的type: module配置，会破坏整个项目的模块规范。
配置完成后执行打包，检查对应旧库的编译产物确认this绑定生效，旧库即可正常运行。

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