Support old browser with terser + rollup?

Question

I need to support fairly old browsers... I'd say at last back to IE10 or 11.

I added rollup and terser... I wanted to write ES2017 code with arrow functions, etc... and then have it transpile to a very old version of JS to run in those old browsers.

Here's my rollup config:

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/load.js',
  output: {
    file: 'dist/load.js',
    format: 'iife',
    sourcemap: false,
    plugins: [
      // https://github.com/terser/terser#minify-options
      terser({
        ecma: '5',
        compress: true,
        mangle: true,
      }),
    ],
  },
};

Unfortunately this doesn't seem to be actually converting any of my fancy arrow functions to plain anonymous functions, etc... I'm a bit confused what am I doing wrong here?

I see that I can manually control these via compress options, but I don't feel like I should be required to hand-set EVERY type of feature as I have no idea what browsers support what. I would have suspected I just tell it "convert to ES5" and it does the rest.

Answer 1

Here's how I solved it

import { terser } from 'rollup-plugin-terser';
import getBabelOutputPlugin from '@rollup/plugin-babel';

export default {
  input: 'src/load.js',
  plugins: [
    // https://github.com/terser/terser#minify-options
    terser({
      ecma: '5',
      compress: true,
      mangle: true,
    }),
    getBabelOutputPlugin({
      babelHelpers: 'bundled',
      presets: [
        ['@babel/preset-env', {
          targets: '> 0.25%, last 2 versions, Firefox ESR, not dead',
        }],
      ],
    }),
  ],
  output: {
    file: 'dist/load.js',
    format: 'iife',
    sourcemap: false,
  },
};