使用Babel和Rollup转译startsWith()遇到问题求助

嘿，我之前也碰到过几乎一模一样的问题，折腾了好一会儿才搞定！咱们一步步来梳理可能的原因和解决办法：

1. 检查babel-preset-env的useBuiltIns配置（最常见原因） #

默认情况下，babel-preset-env只会转译语法特性（比如箭头函数、解构赋值），不会自动为内置对象的方法（比如String.prototype.startsWith）添加polyfill。你需要显式开启useBuiltIns选项，并指定core-js版本：

更新你的.babelrc：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        // 确保这里包含不支持startsWith的浏览器，比如IE11
        "browsers": ["IE 11", "last 2 versions"]
      },
      // 按需引入polyfill，只给用到的特性加
      "useBuiltIns": "usage",
      // 指定core-js的版本，现在推荐v3
      "corejs": 3
    }]
  ]
}

注意：如果你用的是useBuiltIns: 'entry'，还需要在项目入口文件手动添加import 'core-js/stable'; import 'regenerator-runtime/runtime';，但'usage'模式会自动帮你处理，更省心。

2. 确认依赖包已正确安装 #

别漏了安装core-js@3，因为babel-preset-env从v7开始不再自带polyfill：

npm install core-js@3 --save

同时确保你的Rollup Babel插件是最新版的，比如用@rollup/plugin-babel（替代旧的rollup-plugin-babel）：

npm install @rollup/plugin-babel @babel/core @babel/preset-env --save-dev

3. 检查Rollup插件的执行顺序 #

Rollup的插件是按配置顺序执行的，Babel插件必须放在CommonJS转换插件（比如@rollup/plugin-commonjs）之前，否则代码会先被转成CommonJS，Babel就没法正确处理了。

示例rollup.config.js：

import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    // 先处理Babel转译
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**' // 排除第三方包，除非你需要转译它们
    }),
    resolve(), // 解析node_modules里的模块
    commonjs() // 转换CommonJS模块为ES模块
  ]
};

4. 验证目标浏览器配置是否准确 #

如果你的targets里只包含已经支持startsWith的浏览器（比如Chrome 41+、Firefox 17+），babel-preset-env会认为不需要转译或添加polyfill。可以确认你的目标浏览器列表里包含不支持的版本（比如IE11），这样Babel才会触发polyfill逻辑。

最后验证 #

修改配置后，重新执行Rollup打包，然后查看输出的bundle.js，应该能看到startsWith的polyfill代码，或者代码被转译成兼容目标浏览器的写法啦！

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