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