JavaScript Babel

[Hendoul]

Hi

Ich habe gerade begonnen mich mit Babel auseinanderzusetzen und habe ein paar grundsätzliche Fragen:

1. Läuft Babel zu Runtime und tranformiert dort oder läuft das alles bevor man den Code ausliefert/bundled?

2. Wenn etwas gepolyfilled wird, wird es dann einmalig für alle Browser gemacht, obwohl das Polyfill z.B. nur für IE11 nötig wäre?

3. Zu was genau wird kompiliert wenn ich @babel/preset-env mit einer browsersList verwende? Nicht generell zu es5 sondern nur der Code der es nötig hat anhand browsersList?

 

[FranzvonAssisi]

1. Nein, das läuft vorher

2. Der Code für den Polyfill wird einfach zum Code hinzugefügt, aber nur ausgeführt, wenn der Browser dies (was der Polyfill macht) nicht unterstützt

3. Ja, quasi die maximale Schnittmenge aller unterstützten Funktionen der Browser in der Browserlist.

Lg

 

[Joshinator]

Falls Punkt 2 für dich ein "Problem" wegen unnötigen Bytes ist, lass Babel zwei verschiedene Bundles bilden.
Man kann Browser für Babel in zwei Kategorien unterteilen, die die ES6 können und Internet Explorer

Wenn IE wichtig ist kannst du Babel extra ein "legacy" Bundle transpilen lassen und das dann nur im IE laden, während alle anderen modernen Browser ein modernes Bundle laden was keine Polyfills beinhaltet.

Das sieht dann in ungefähr so aus:

<script type="module" src="modern-bundle.js"></script>
<script nomodule src="legacy-bundle.js"></script>

Alte Browser verwerfen modern.js weil die den Typ "module" nicht kennen, weil der zweite Script-Tag aber nur ein unbekanntes Attribut hat wird das vom altem Browser akzeptiert.
Moderne Browser die nomodule und type="module" verstehen wissen das die das legacy-Bundle nicht laden müssen.

Ist meiner Meinung nach das beste von beiden Welten, die meisten Browser müssen keine Polyfills runterladen und nur alte Browser bekommen die mit.

Wichtig ist aber das damit nur zwischen ES6-fähig und nicht-ES6-fähig unterschieden werden kann, wenn du für irgendein obskures Chrome-Only Feature einen Polyfill in Firefox brauchsts (oder vice-versa) muss das also auch im modernem-Bundle passieren. Aber sowas ist eher Ausnahme statt Regel, meistens reicht eine Unterscheidung in ES6 und ES5.