Babel polyfill includes all polyfills no matter which targets are set

Question

I am using Babel 7.1 together with rollup (v0.67). This is my rollup config:

{
  input: 'src/svg.js',
  output: {
    file: 'dist/myBundle.js',
    name: 'myBundle',
    sourceMap: true,
    format: 'iife'
  },
  plugins: [
    resolve({browser: true}),
    commonjs(),
    babel({
      include: 'src/**',
      runtimeHelpers: true,
      babelrc: false,
      presets: [["@babel/preset-env", {
        modules: false,
        targets: {
          firefox: "63"
        },
        useBuiltIns: "usage"
      }]],
      plugins: [["@babel/plugin-transform-runtime", {
        corejs: false,
        helpers: true,
        regenerator: true,
        useESModules: true
      }]]
    })
  ]
}

I want to polyfill older browsers. According to the docs, I need to include babel-polyfill in my entry point which I did. Now babel should include only the polyfills needed (because of useBuiltIns: "usage"). However, even when specifying the newest Browsers as target, I get the full load of code into my bundle (10000 lines of code).

What I tried:

• I tried useBuiltIns: "entry" which fixes it for newer browsers but its not what I want (it just includes all polyfills which are potentially needed by the browser no matter if they are actually used in the code).

• change the order of the rollup plugins

• not include the babel-polyfill import

I have no idea why this is happening. It would be great if someone could solve this issue. Its driving me crazy!

And if someone knows as a bonus why no sourcemap is generated I dont mind getting an answer for that, too

Answer 1

Hey I made a repo which explores a good babel/rollup setup utilising preset-env and useBuiltIns 'usage'.

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

export default {
    input : 'main.js',
    output : {
        file : 'app.js',
        format : 'iife',
        name : 'PROJECT'
    },
    plugins : [
        resolve(),
        babel({
            exclude : 'node_modules/**',
            presets : [[
                '@babel/env', {
                    useBuiltIns : 'usage'
                }
            ]],
            plugins : [
                '@babel/plugin-transform-runtime'
            ],
            runtimeHelpers : true
        }),
        commonjs()
    ]
};

Take a look https://github.com/matt3224/rollup-babel7

If you can figure out how to reduce the output further submit a PR