Set up Babel transpilation for browser compatibility

[romaricpascal]

What

Set up Babel transpilation using @babel/preset-env to transform modern JavaScript code so it runs without errors in <script type="module"> ES module scripts (see .browserlistrc supported browsers).

Polyfill libraries like core-js can be considered later.

Why

We want to maximise the chances of JavaScript running properly in browsers that will load our JavaScript.

Transformed code should not cause parsing or syntax errors. Since feature detection can guard against code we choose not to run, unsupported browser APIs don't have to be transformed.

Who needs to work on this

Developers

Who needs to review this

Developers

Depends on

• Upgrade Rollup #3462
• Gather built files sizes and display them in review app #3280
• Gather breakdown of modules content #3281
• Define new package directories, filenames, extensions #3482
• Write up decisions on JavaScript browser compatibility in v5 govuk-design-system-architecture#27

Done when

Beta Give feedback

1. We've set up Babel to transform our files, according to the structure defined in Define new package directories, filenames, extensions #3482

[colinrotherham]

This issue previously included browser polyfills

Since we don't currently have the issue's been split out into:

• Set up Babel polyfills for browser compatibility #3948

[colinrotherham]

Linking the PR to enable Babel transforms:

• Add Babel to transform ES2020 public and static class fields #3820