Meta tags:
description=Wie modernes JavaScript auf älteren Engines läuft: Transpiler wie Babel für neue Syntax und Polyfills wie core-js für fehlende Built-in-Methoden.;

Headings (most frequently used words):

transpiler, syntax, polyfills, und, vs, apis, in, javascript, die, zwei, lücken, neue, alte, fehlende, zur, laufzeit, bereitstellen, polyfill, auf, einen, blick, einbindung, eine, moderne, toolchain, testen, sie, ihr, wissen, babel, preset, env, browserslist,

Text of the page (most frequently used words):
und (71), die (55), ein (31), das (30), #syntax (25), eine (23), javascript (22), api (22), dom (20), #transpiler (19), ist (19), sie (18), nicht (18), der (18), string (17), polyfill (16), kann (16), lernen (15), wie (15), code (13), engine (13), prototype (13), nur (13), browser (13), auf (12), methoden (12), padstart (12), man (12), neue (11), mit (11), für (10), apis (10), zur (10), babel (10), moderne (9), polyfills (9), build (9), funktionen (9), html (8), web (8), built (8), promise (8), wird (8), ihr (7), fehlende (7), alte (7), this (7), einer (7), oder (7), wenn (7), browserslist (7), engines (7), tools (6), einen (6), laufzeit (6), class (6), arrow (6), funktion (6), array (6), ältere (6), unterstützen (6), sind (6), von (6), fetch (6), function (6), padstring (6), w3docs (5), was (5), parsen (5), den (5), chaining (5), zeit (5), native (5), core (5), schreibt (5), verwenden (5), preset (5), objekt (5), grammatik (5), ihre (5), kopieren (5), targetlength (5), events (5), formatter (5), color (5), alle (4), json (4), generator (4), css (4), toolchain (4), zwei (4), optional (4), includes (4), welche (4), schließen (4), weil (4), werkzeug (4), env (4), diese (4), guard (4), console (4), and (4), läuft (4), version (4), pad (4), length (4), object (4), bevor (4), objekte (4), shadow (4), async (4), einführung (4), encoder (3), editor (3), quizze (3), übungen (3), php (3), bereitstellen (3), lücken (3), page (3), prüfen (3), operator (3), lücke (3), übung (3), bundle (3), ausgeführt (3), werden (3), implementierung (3), bereits (3), warum (3), prüfung (3), gibt (3), besucher (3), tatsächlich (3), sich (3), es6 (3), nichts (3), fehlt (3), werkzeuge (3), hinzufügen (3), prototypen (3), feature (3), log (3), the (3), const (3), verwendet (3), einem (3), methode (3), return (3), muster (3), erhält (3), ausgeliefert (3), hat (3), mehr (3), flag (3), document (3), data (3), event (3), eigenschaften (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), sprache (2), über (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), snippets (2), testen (2), wissen (2), einbindung (2), blick (2), popups (2), window (2), bigint (2), jedoch (2), eines (2), können (2), überschreiben (2), vorhanden (2), beginnt (2), handgeschriebenes (2), des (2), abfrage (2), welches (2), gleichwertige (2), echte (2), diesen (2), herunterstufen (2), ziel (2), kapitel (2), kompatibilität (2), polyfilling (2), chrome (2), modernen (2), publikum (2), wirklich (2), benötigt (2), polyfilled (2), zielen (2), tool (2), führt (2), aus (2), deklariert (2), einmal (2), hand (2), funktioniert (2), brauchen (2), aber (2), lesen (2), nein (2), beheben (2), fehlenden (2), vor (2), beide (2), dieser (2), tun (2), detection (2), eigenen (2), would (2), invoice (2), beispiel (2), würde (2), ohne (2), sodass (2), jedes (2), len (2), let (2), math (2), auch (2), kleines (2), schreiben (2), umschreiben (2), nie (2), fromentries (2), liste (2), jede (2), umgebungen (2), destructuring (2), parameter (2), double (2), var (2), quell (2), modernes (2), verstehen (2), werte (2), nullish (2), coalescing (2), template (2), älteren (2), auslösen (2), workers (2), file (2), suche (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), url (2), microtasks (2), formulare (2), benutzerdefinierte (2), ereignisse (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), error (2), erweitern (2), handling (2), prototypes (2), interaktive (2), elemente (2), property (2), new (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, datenschutzrichtlinie, kontakt, uns, unternehmen, probier, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, deklaration, alten, kleiner, machen, innerhalb, blocks, umzuwandeln, browsers, kosten, rat, ignorieren, jeder, herunterlädt, parst, ungenutzt, wegwirft, aggressives, produziert, außerdem, größere, langsamere, ausgaben, alles, sondern, benutzer, nachzuvollziehen, bestimmter, unterstützt, nützlicher, begleiter, übermäßiges, bläht, heutigen, evergreen, edge, firefox, safari, aktualisieren, automatisch, große, mehrheit, umfangreiches, transpilieren, breites, weitaus, weniger, notwendig, als, früher, setzen, realistisches, lassen, polyfillen, neueren, info, ergebnis, zugeschnitten, transformiert, gleiche, konfiguration, injiziert, fehlen, diejenigen, verweist, usebuiltins, usage, herunterstuft, seine, zielumgebungen, praxis, bundler, vite, webpack, esbuild, steuert, typische, einrichtung, einfache, faustregel, ihren, ihn, meisten, realen, projekte, gleichzeitig, beides, undefined, parsierbare, keine, andere, fügt, hinzu, funktionsweise, beispieleingabe, auslieferung, zeitpunkt, behebt, aspekt, beiden, leicht, verwechseln, unterstützung, älterer, existieren, vergleich, hält, auseinander, modifizieren, eingebauter, sollten, hinter, anwendungscode, sollte, nativen, vermeiden, konflikten, anderen, bibliotheken, zukünftigen, sprachfunktionen, führen, warnung, check, exactly, loader, typeof, available, natively, else, missing, using, once, guaranteed, exist, 000042, run, editable, folgende, erkennt, genauso, veralteten, hätte, obige, fallback, zuvor, bereitgestellt, zeile, entscheidende, schnellen, gut, getesteten, durch, ersetzen, besagt, eingreifen, optimierte, behalten, zurückfallen, mal, slice, while, floor, wesentliche, installiert, codestück, fehlendes, hinzufügt, damit, kein, herbeizaubern, job, häufigsten, verwendete, bibliothek, implementierungen, hunderte, weitere, bereitstellt, from, transpiliert, schränkt, fast, heruntergestuft, erweitert, veraltete, findet, weit, transformation, statt, kerngedanke, viel, arbeit, leisten, soll, schritt, not, dead, last, versions, konfiguriert, selten, einzeln, stattdessen, entscheidet, transformationen, basierend, angewendet, möchte, kurze, gemeinsam, genutzte, möglichkeit, zielbrowser, beschreiben, verhalten, identisch, geändert, macht, dasselbe, deklarationen, default, zum, reihe, prüfungen, umgewandelt, problemlos, verarbeiten, user, address, city, output, down, leveled, es5, abzielt, klassischen, funktionsausdruck, source, modern, hier, vorher, nachher, compiler, genannt, liest, gleichwertiges, älteres, bekannteste, dies, geschieht, jemals, aufteilung, ganze, geschichte, vorab, während, ausführung, ihres, codes, verfügbar, globalen, objekten, liegen, selbst, literale, versteht, schlägt, skripts, fehl, lässt, datei, abgelehnt, irgendein, greift, hilft, allein, ausreicht, separate, dafür, braucht, verschiedene, benötigen, dieses, erklärt, zeigt, unterschiede, beschreibt, passen, jahr, jährliche, es2015, es2020, es2022, weiter, bringt, problem, dass, fixen, dem, laufzeitumgebung, gerade, einige, davon, jahrelang, veraltet, neuesten, einwandfrei, still, fehlschlagen, schlicht, existiert, syntaxerror, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, element, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, canvas, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, laden, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, standard, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, dokument, verändern, attribute, knoteneigenschaften, typ, tag, inhalt, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, frames, windows, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, fehler, try, catch, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, scope, rest, spread, rekursion, stack, tojson, datum, uhrzeit, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, strings, zahlen, primitiven, types, konstruktor, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, funktionsausdrücke, schleifen, switch, bedingte, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
r color hex colors hsl alle 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder alle 19 code formatters javascript formatter css formatter html formatter json formatter php formatter w3docs durchsuchen k de english en deutsch de русский ru français fr español es português pt italiano it anmelden javascript lernen javascript basic einführung javascript verwenden js kommentare js mit dom js use strict js variablen js datentypen js typkonvertierungen js interaktive funktionen js operatoren js vergleichsoperatoren js logische operatoren js nullish coalescing js bedingte operatoren js switch js schleifen js funktionen js funktionsausdrücke js arrow functions js es6 objects the basics js objects js objekte kopieren js objektmethoden this js garbage collection js symbol typen js objekt zu primitiv konvertierung js konstruktor operator new js optional chaining data types js methoden von primitiven js zahlen js math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript polyfills und transpiler wie modernes javascript auf älteren engines läuft transpiler wie babel für neue syntax und polyfills wie core js für fehlende built in methoden javascript erhält jedes jahr neue funktionen jede jährliche version es2015 es6 es2020 es2022 und so weiter bringt neue syntax und neue built in methoden das problem ist dass ihr code nicht in einer fixen engine läuft er läuft in dem browser oder der laufzeitumgebung die ihre besucher gerade verwenden und einige davon sind jahrelang veraltet code der in der neuesten chrome version einwandfrei funktioniert kann in einer älteren einen syntaxerror auslösen oder still fehlschlagen weil eine methode wie array prototype includes schlicht nicht existiert es gibt zwei separate lücken zu schließen und dafür braucht man zwei verschiedene werkzeuge neue syntax die eine alte engine nicht einmal parsen kann benötigt einen transpiler neue built in apis die eine alte engine nie ausgeliefert hat benötigen ein polyfill dieses kapitel erklärt beide zeigt ihre unterschiede und beschreibt wie sie in eine moderne build toolchain passen die zwei lücken syntax vs apis bevor man zu einem werkzeug greift hilft es zu verstehen warum ein werkzeug allein nicht ausreicht syntax ist die grammatik der sprache arrow funktionen class optional chaining der nullish coalescing operator template literale wenn eine engine die grammatik nicht versteht schlägt das parsen des skripts fehl und nichts wird ausgeführt das lässt sich zur laufzeit nicht beheben weil die datei abgelehnt wird bevor irgendein code ausgeführt wird apis sind die built in funktionen und objekte die während der ausführung ihres codes verfügbar sind promise array prototype includes string prototype padstart object fromentries fetch das sind nur werte die auf globalen objekten und prototypen liegen wenn eines fehlt können sie es selbst hinzufügen bevor ihr code es verwendet diese aufteilung ist die ganze geschichte die grammatik vorab umschreiben oder die fehlenden werte zur laufzeit bereitstellen transpiler neue syntax in alte syntax ein transpiler auch quell zu quell compiler genannt liest ihr modernes javascript und schreibt es in gleichwertiges älteres javascript um das mehr engines verstehen der bekannteste transpiler ist babel dies geschieht zur build zeit bevor ihr code jemals ausgeliefert wird sodass der browser nur syntax erhält die er parsen kann hier ist ein kleines vorher nachher sie schreiben eine moderne arrow funktion source modern syntax const double x x 2 kopieren ein transpiler der auf ältere engines abzielt schreibt sie in einen klassischen funktionsausdruck um output down leveled to es5 var double function x return x 2 kopieren das verhalten ist identisch nur die grammatik hat sich geändert babel macht dasselbe für class deklarationen destructuring default parameter optional chaining und mehr zum beispiel wird user address city in eine reihe von prüfungen umgewandelt die ältere engines problemlos verarbeiten babel preset env und browserslist man konfiguriert selten jede funktion einzeln stattdessen verwendet man babel preset env ein preset das entscheidet welche transformationen basierend auf den umgebungen angewendet werden die man unterstützen möchte diese umgebungen werden mit einer browserslist abfrage deklariert eine kurze gemeinsam genutzte möglichkeit zielbrowser zu beschreiben browserslist 0 5 last 2 versions not dead kopieren mit dieser liste transpiliert babel preset env nur das was diese browser tatsächlich nicht unterstützen schränkt man die liste auf moderne browser ein wird fast nichts heruntergestuft erweitert man sie auf veraltete findet weit mehr transformation statt der kerngedanke ein transpiler ist ein build schritt und browserslist gibt vor wie viel arbeit er leisten soll polyfills fehlende apis zur laufzeit bereitstellen ein polyfill ist ein codestück das ein fehlendes built in hinzufügt damit eine alte engine die api zur laufzeit erhält ein transpiler kann syntax umschreiben aber er kann kein promise objekt herbeizaubern das die engine nie ausgeliefert hat das ist ein job für ein polyfill die am häufigsten verwendete polyfill bibliothek ist core js die implementierungen für promise array from object fromentries string prototype padstart und hunderte weitere bereitstellt man kann auch ein kleines polyfill von hand schreiben das wesentliche muster ist eine feature detection guard eine if prüfung die ihre version nur installiert wenn die native nicht vorhanden ist if string prototype padstart string prototype padstart function targetlength padstring targetlength math floor targetlength 0 if targetlength this length return string this padstring padstring string padstring let pad const len targetlength this length let i 0 while pad length len if padstring i i 0 pad padstring i i return pad string this slice 0 kopieren die zeile if string prototype padstart ist das entscheidende ohne sie würde man die native implementierung der engine jedes mal überschreiben schnellen gut getesteten built in code durch eigenen ersetzen die guard besagt nur eingreifen wenn die funktion wirklich fehlt sodass moderne engines ihre optimierte version behalten und nur alte engines auf ihre zurückfallen das folgende beispiel erkennt und verwendet padstart genauso wie ein polyfill es tun würde in einem modernen browser läuft die native methode in einem veralteten hätte die obige guard fallback implementierung sie zuvor bereitgestellt javascript editable run feature check exactly as a polyfill loader would do if typeof string prototype padstart function console log padstart is available natively else console log padstart is missing and would be polyfilled using the api once it is guaranteed to exist const invoice 42 console log invoice padstart 6 0 000042 warnung das modifizieren eingebauter prototypen wie string prototype sollten nur polyfills tun und nur hinter einer feature detection guard im eigenen anwendungscode sollte man das hinzufügen von methoden zu nativen prototypen vermeiden es kann zu konflikten mit anderen bibliotheken und zukünftigen sprachfunktionen führen transpiler vs polyfill auf einen blick die beiden werkzeuge sind leicht zu verwechseln weil beide zur unterstützung älterer engines existieren dieser vergleich hält sie auseinander aspekt transpiler z b babel polyfill z b core js behebt neue syntax die die engine nicht parsen kann fehlende built in apis zeitpunkt build zeit vor der auslieferung laufzeit im browser beispieleingabe arrow funktionen class promise fetch array prototype includes funktionsweise schreibt code in ältere grammatik um fügt die fehlende funktion das fehlende objekt hinzu kann die andere lücke schließen nein kann keine fehlenden apis hinzufügen nein kann nicht parsierbare syntax nicht beheben eine einfache faustregel wenn eine engine ihren code nicht lesen kann brauchen sie einen transpiler wenn sie ihn lesen kann aber eine funktion undefined ist brauchen sie ein polyfill die meisten realen projekte verwenden beides gleichzeitig einbindung in eine moderne toolchain in der praxis führt man diese werkzeuge nicht von hand aus ein bundler oder build tool wie vite webpack oder esbuild steuert sie für sie eine typische einrichtung funktioniert so man deklariert seine zielumgebungen einmal in browserslist das build tool führt babel mit babel preset env aus das nur die syntax herunterstuft die den zielen fehlt die gleiche konfiguration injiziert core js polyfills für die apis die diesen zielen fehlen und mit usebuiltins usage nur diejenigen auf die der code tatsächlich verweist das ergebnis ist ein bundle das auf das echte publikum zugeschnitten ist nichts wird transformiert oder polyfilled was die browser der besucher bereits unterstützen i info die heutigen evergreen browser chrome edge firefox und safari aktualisieren sich automatisch und unterstützen bereits die große mehrheit der modernen es6 und neueren funktionen umfangreiches transpilieren und breites polyfilling sind weitaus weniger notwendig als früher setzen sie ein realistisches browserslist ziel für ihr publikum und lassen sie die toolchain nur das herunterstufen und polyfillen was wirklich benötigt wird es gibt echte kosten diesen rat zu ignorieren übermäßiges polyfilling bläht das bundle mit code auf den jeder moderne besucher herunterlädt parst und ungenutzt wegwirft zu aggressives herunterstufen produziert außerdem größere langsamere ausgaben das ziel ist nicht alles unterstützen sondern unterstützen was die benutzer tatsächlich verwenden um nachzuvollziehen welche funktionen ein bestimmter browser unterstützt ist das kapitel über dom und browser kompatibilität ein nützlicher begleiter testen sie ihr wissen übung welches werkzeug schreibt moderne javascript syntax zur build zeit in eine gleichwertige ältere syntax um welches werkzeug schreibt moderne javascript syntax zur build zeit in eine gleichwertige ältere syntax um ein transpiler wie babel ein polyfill wie core js eine browserslist abfrage die javascript engine des browsers prüfen übung warum beginnt ein handgeschriebenes polyfill mit einer prüfung wie if string prototype padstart warum beginnt ein handgeschriebenes polyfill mit einer prüfung wie if string prototype padstart um die native implementierung der engine nicht zu überschreiben wenn sie bereits vorhanden ist um neue syntax in ältere syntax umzuwandeln weil polyfills nur innerhalb eines if blocks ausgeführt werden können um das bundle zur build zeit kleiner zu machen prüfen übung welche lücke kann ein polyfill schließen ein transpiler jedoch nicht welche lücke kann ein polyfill schließen ein transpiler jedoch nicht eine fehlende built in api wie promise oder array prototype includes neue syntax wie den optional chaining operator eine arrow funktion die die engine nicht parsen kann eine class deklaration in einer alten engine prüfen was this ...