Skip to content

Distinguish "legacy" and "modern" compile targets for webpack/babel

Mike Greiling requested to merge mg-add-legacy-compile-option into master

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:

  1. 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 karma due to some incompatibilities we need to work out (spyOn doesn't work with ClassName.prototype.foo in es2015+). Currently production builds will auto-enable legacy mode.

  2. 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 gitlab-org/gitlab-ce#49106

Does this MR meet the acceptance criteria?

Edited by Mike Greiling

Merge request reports