babel / babel/babel-loader

Question: feature detection & polyfilling on the client side, possible with babel-loader?

Open
#843 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
4.8k
Forks
456
Avg merge
9h 19m
Merged PRs (30d)
2

Description

It is a common practice now to run builds several times, at least once for "older" browsers and again for "modern" browsers, with different sets of polyfills. This is IMO not the right way or the right stage in the build/load process to hande feature detection and polyfilling. IMO it should happen entirely at runtime.

[There seems to be no easy solution to do this with the common babel / babel-loader setup.](//https://stackoverflow.com/questions/58261075/how-to-detect-features-and-lazy-load-only-the-needed-polyfills-with-babel-core)

The reason is probably that the babel-loader generates code which "hard-wires" all polyfills with `require()`.

Would it be possible to wrap these in feature tests and loading them only conditionally, with a mechanism like dynamic requires?

(I know, the Dynamic Imports might night to be polyfilled themselves and hence be the only exception to the general approach.)

I've looked at the `customize` option of the babel-loader but found no documentation on the actual customization options, and the behaviour that was implemented in the [webpack example](https://webpack.js.org/loaders/babel-loader/#customized-loader) seems to receive ready-made code from babel inside `result.code`, whereas the `result.ast` (which might be easier to extend with the desired behavour) is `null`.

Contributor guide

Open the contributing guide

Research direction

Start with the babel-loader customize option and the customized-loader webpack example referenced in the issue. Inspect how result.code and result.ast are provided, then determine whether conditional polyfill loading can be supported without hard-wired require() calls; done would require a documented, workable approach.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, webpack
Domain
build-system, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.