Gulp+Rollup+Babel构建失败：开启useBuiltIns:true后报错

Hey there, let's work through this issue you're hitting—I've tangled with similar Babel/Rollup integration headaches before, so let's break down the most likely fixes:

1. Fix Your useBuiltIns Value (Babel v7 Changed This!) #

First off, in Babel v7, useBuiltIns: true is a deprecated legacy setting. The modern, Rollup-compatible options are 'usage' or 'entry':

• useBuiltIns: 'usage': Automatically detects which ES features your code uses and injects only the necessary polyfills (no manual import needed).
• useBuiltIns: 'entry': Requires you to add import '@babel/polyfill' at the top of your entry file; Babel will then replace this with targeted polyfills based on your targets config.

Update your Babel config (usually .babelrc or babel.config.json) to use one of these values instead of true. For example:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": "> 0.25%, not dead"
      },
      "useBuiltIns": "usage",
      "corejs": 3 // Required if using core-js@3 (recommended over @babel/polyfill)
    }]
  ]
}

2. Use the Correct Rollup-Babel Plugin #

Make sure you're using @rollup/plugin-babel (the official, Babel v7-compatible plugin) instead of the old rollup-plugin-babel which doesn't support Babel v7's new features. Install it via npm/yarn:

npm install @rollup/plugin-babel --save-dev

Then update your gulpfile's rollup plugin configuration to use it:

const gulp = require('gulp');
const rollup = require('rollup-stream');
const source = require('vinyl-source-stream');
const babel = require('@rollup/plugin-babel').default;

gulp.task('bundle', () => {
  return rollup({
    input: './src/your-entry-file.js',
    plugins: [
      babel({
        babelHelpers: 'bundled', // Use 'runtime' if you want to externalize helpers (requires @babel/plugin-transform-runtime)
        exclude: 'node_modules/**',
        presets: ['@babel/preset-env'] // Or reference your .babelrc instead
      })
    ]
  })
  .pipe(source('your-bundle-name.js'))
  .pipe(gulp.dest('./dist'));
});

3. Ditch @babel/polyfill for core-js #

@babel/polyfill was deprecated in Babel 7.4.0. Instead, use core-js@3 (the official polyfill library) and regenerator-runtime for async/await support:

npm install core-js@3 regenerator-runtime --save

As shown in step 1, add the corejs: 3 option to your @babel/preset-env config to let Babel handle polyfill injection correctly.

4. Consider Upgrading Rollup (Your Version is Outdated) #

Rollup v0.56.0 is quite old (released in 2018) and may not fully support Babel v7's useBuiltIns behavior. Upgrading to a newer stable version (v2.x or v3.x) will resolve many compatibility issues. You can upgrade via:

npm install rollup --save-dev

5. Check for Missing Dependencies #

If you're still getting module-not-found errors, double-check that all required packages are installed:

• @babel/core (v7+)
• @babel/preset-env (v7+)
• @rollup/plugin-babel
• core-js@3
• regenerator-runtime

If you're using babelHelpers: 'runtime', you'll also need:

npm install @babel/plugin-transform-runtime @babel/runtime --save-dev

And add the plugin to your Babel config:

{
  "plugins": ["@babel/plugin-transform-runtime"]
}

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