javascriptecmascript-6babeljsrollupterser

Support old browser with terser + rollup?


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.


Solution

  • 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,
      },
    };