Distinguish "legacy" and "modern" compile targets for webpack/babel
What does this MR do?
A step toward enabling browser-targeted webpack bundles. This sets up webpack to target modern browsers for tests and development environments, but continue to target IE11 for production. Eventually we will build two versions of our webpack assets and serve the correct one to the browser by using the
<script type="module"> method.
Now we have two build targets:
Legacy mode (
BABEL_ENV=legacy): This environment variable will force webpack/babel to transpile everything for compatibility with IE11. This mode is automatically enabled for
karmadue to some incompatibilities we need to work out (
spyOndoesn't work with
ClassName.prototype.fooin es2015+). Currently production builds will auto-enable legacy mode.
Non-legacy mode: This will be run on all other builds (dev, dev-server, & jest for now). This is quicker to compile, has a slightly reduced bundle size, and should be quicker to compile and execute in the browser.
Non-legacy mode can be further improved by swapping out some vendor libraries with non-transpiled versions where available. As this is a somewhat new technique, not every third party library distributes their assets as non-transpiled code, so some of this we may need to do ourselves if we want to see the benefits.
What are the relevant issue numbers?
Part of #49106
Does this MR meet the acceptance criteria?
- Changelog entry added, if necessary
- Documentation created/updated via this MR
- Documentation reviewed by technical writer or follow-up review issue created
- Tests added for this feature/bug
- Tested in all supported browsers
- Conforms to the code review guidelines
- Conforms to the merge request performance guidelines
- Conforms to the style guides
- Conforms to the database guides
- Link to e2e tests MR added if this MR has Requires e2e tests label. See the Test Planning Process.
- Security reports checked/validated by reviewer