Webpack配置env预设后IE仍报错：Object doesn't support property or method 'startsWith'

这个问题很常见——你用了@babel/preset-env转译代码，但它默认只处理语法层面的转译（比如箭头函数、let/const这些），不会自动polyfill ES6新增的内置对象方法，而startsWith正是ES6给String原型添加的方法，IE原生完全不支持它。

下面是具体的解决步骤：

1. 安装必要依赖 #

你需要添加core-js相关的polyfill工具，以及babel的runtime插件来避免全局污染：

# npm 命令
npm install --save-dev @babel/preset-env @babel/plugin-transform-runtime
npm install @babel/runtime-corejs3

# 或者 yarn 命令
yarn add --dev @babel/preset-env @babel/plugin-transform-runtime
yarn add @babel/runtime-corejs3

2. 修改Babel配置 #

更新你的.babelrc（或babel.config.json），添加useBuiltIns和corejs配置，同时引入runtime插件：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": [">0.1%", "last 4 versions", "not ie <= 9"]
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}

配置说明 #

• useBuiltIns: 'usage'：让Babel自动检测代码中用到的ES6+内置方法，按需引入对应的polyfill，不会一次性引入所有polyfill，减小打包体积。
• corejs: 3：指定使用core-js的第3版本，它完整覆盖了ES6到ES2020的所有内置对象和方法的polyfill，包括startsWith。
• @babel/plugin-transform-runtime：用模块化的方式引入polyfill，避免污染全局作用域，同时复用辅助代码，减少重复。

这样配置后，Webpack打包时会自动给IE添加startsWith的polyfill，错误就会消失了。

内容的提问来源于stack exchange，提问作者Витя Фролов