添加@babel/transform-runtime后popper.min.js报Cannot set properties错误

错误原因 #

@babel/transform-runtime插件默认会对所有匹配到的JS文件做模块化改造，修改顶层this指向为undefined。而popper.min.js属于UMD格式的第三方包，默认逻辑是将Popper对象挂载到全局this（浏览器环境下即window）上，被babel处理后this变为undefined，就会出现赋值失败的类型错误。

具体解决方案 #

• 方案1：排除第三方依赖的babel转译
  在babel.rc的配置中新增exclude字段，跳过node_modules目录以及你单独引入的popper.min.js文件路径即可，示例配置如下：

{
  "presets": [
    // 保留你原本的preset配置，比如@babel/preset-env
  ],
  "plugins": [
    ["@babel/transform-runtime", {
      // 保留你原本的runtime配置，比如corejs、version等参数
    }]
  ],
  "exclude": [
    "node_modules/**",
    "你的项目中popper.min.js存放的相对路径/**"
  ]
}

如果你的项目是在webpack中配置的babel-loader，直接在loader的exclude字段添加上述路径即可，不需要改babel.rc。

• 方案2：仅排除popper相关包
  如果你需要对部分node_modules下的依赖做babel转译，不能全量排除node_modules，就单独把popper相关的包加入排除列表即可：
  exclude: [/node_modules\/(?:@popperjs\/core|popper\.js)/]

• 方案3：替换引入方式
  如果不想修改babel配置，可直接把popper的引入方式从引入编译好的popper.min.js改为引入npm包的ES模块版本，通过import { createPopper } from '@popperjs/core'的方式调用，不会出现全局挂载冲突。

内容的提问来源于stack exchange，提问作者Alif Elahi Khan