Websites zu erstellen, die in allen gängigen Browsern gut funktionieren, ist ein Grundsatz des offenen Web-Ökosystems. Dies bedeutet jedoch zusätzliche Arbeit, um sicherzustellen, dass der gesamte von Ihnen geschriebene Code in jedem Browser unterstützt wird, den Sie ansprechen möchten. Wenn Sie neue JavaScript-Sprachfunktionen verwenden möchten, müssen Sie diese Funktionen in abwärtskompatible Formate für Browser transpilieren, die sie noch nicht unterstützen.
Babel ist das am häufigsten verwendete Tool zum Kompilieren von Code, der eine neuere Syntax enthält, in Code, der von verschiedenen Browsern und Umgebungen (z. B. Node) verstanden werden kann. In diesem Leitfaden wird davon ausgegangen, dass Sie Babel verwenden. Folgen Sie daher der Einrichtungsanleitung, um es in Ihre Anwendung einzubinden, falls Sie das noch nicht getan haben. Wählen Sie in Build Systems webpack aus, wenn Sie Webpack als Modul-Bundler in Ihrer App verwenden.
Wenn Sie mit Babel nur das transpilieren möchten, was für Ihre Nutzer erforderlich ist, müssen Sie Folgendes tun:
- Legen Sie fest, auf welche Browser Sie Ihre Anzeigen ausrichten möchten.
- Verwenden Sie
@babel/preset-envmit geeigneten Browserzielen. - Mit
<script type="module">können Sie verhindern, dass transpilierter Code an Browser gesendet wird, die ihn nicht benötigen.
Browser für die Ausrichtung auswählen
Bevor Sie die Transpilierung des Codes in Ihrer Anwendung ändern, müssen Sie ermitteln, welche Browser auf Ihre Anwendung zugreifen. Analysieren Sie, welche Browser Ihre Nutzer derzeit verwenden, und welche Sie als Ausrichtung planen, um fundierte Entscheidungen zu treffen.
@babel/preset-env verwenden
Das Transpilieren von Code führt in der Regel zu einer Datei, die größer ist als die ursprünglichen Dateien. Wenn Sie die Anzahl der Kompilierungen minimieren, können Sie die Größe Ihrer Bundles reduzieren, um die Leistung einer Webseite zu verbessern.
Anstelle bestimmter Plug-ins zur selektiven Kompilierung bestimmter Sprachfunktionen, die Sie verwenden, bietet Babel eine Reihe von Voreinstellungen, in denen Plug-ins zusammengefasst sind. Verwenden Sie @babel/preset-env, um nur die Transformationen und Polyfills einzubeziehen, die für die Browser erforderlich sind, auf die Sie Ihre Website ausrichten möchten.
Fügen Sie @babel/preset-env in der Babel-Konfigurationsdatei .babelrc in das presets-Array ein:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Geben Sie im Feld targets an, welche Browserversionen eingeschlossen werden sollen. Fügen Sie dazu eine entsprechende Abfrage in das Feld browsers ein. @babel/preset-env lässt sich in browserslist einbinden, einer Open-Source-Konfiguration, die von verschiedenen Tools für das Browser-Targeting verwendet wird. Eine vollständige Liste der kompatiblen Abfragen finden Sie in der Browserslist-Dokumentation.
Sie können auch eine .browserslistrc-Datei verwenden, um die Umgebungen aufzulisten, auf die Sie abzielen möchten.
Der Wert ">0.25%" weist Babel an, nur die Transformationen einzubeziehen, die zur Unterstützung von Browsern erforderlich sind, die mehr als 0,25% der globalen Nutzung ausmachen. So wird sichergestellt, dass Ihr Bundle keinen unnötigen transpilierten Code für Browser enthält, die von einem sehr kleinen Prozentsatz der Nutzer verwendet werden.
In den meisten Fällen ist dies eine bessere Lösung als die folgende Konfiguration:
"targets": "last 2 versions"
Mit dem Wert "last 2 versions" wird Ihr Code für die zwei letzten Versionen jedes Browsers transpiliert. Das bedeutet, dass auch eingestellte Browser wie Internet Explorer unterstützt werden.
Dies kann die Größe Ihres Bundles unnötig erhöhen, wenn Sie nicht davon ausgehen, dass diese Browser zum Zugriff auf Ihre Anwendung verwendet werden.
Sie sollten die richtige Kombination von Suchanfragen auswählen, um nur auf Browser auszurichten, die Ihren Anforderungen entsprechen.
Moderne Fehlerkorrekturen aktivieren
@babel/preset-env gruppiert mehrere JavaScript-Syntaxfunktionen in Sammlungen und aktiviert/deaktiviert sie je nach den angegebenen Zielbrowsern. Das funktioniert zwar gut, aber eine ganze Reihe von Syntaxfunktionen wird umgewandelt, wenn ein anvisierter Browser einen Fehler in nur einer einzelnen Funktion enthält.
Dies führt häufig zu mehr transformiertem Code als nötig.
Die Option „Fehlerkorrekturen“ in @babel/preset-env wurde ursprünglich als separates Preset entwickelt. Sie löst dieses Problem, indem moderne Syntax, die in einigen Browsern nicht funktioniert, in die nächstgelegene äquivalente Syntax umgewandelt wird, die in diesen Browsern funktioniert. Das Ergebnis ist fast identischer moderner Code mit einigen kleinen Syntaxänderungen, die die Kompatibilität in allen Zielbrowsern gewährleisten. Damit Sie diese Optimierung verwenden können, muss @babel/preset-env 7.10 oder höher installiert sein. Setzen Sie dann das Attribut bugfixes auf true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
In Babel 8 ist die Option bugfixes standardmäßig aktiviert.
„<script type="module">“ verwenden
JavaScript-Module oder ES-Module sind eine relativ neue Funktion, die in allen gängigen Browsern unterstützt wird. Sie können Module zum Erstellen von Skripts verwenden, die sich aus anderen Modulen importieren und exportieren lassen. Sie können sie aber auch mit @babel/preset-env verwenden, um nur Browser zu verwenden, die diese unterstützen.
Anstatt nach bestimmten Browserversionen oder Marktanteilen abzufragen, können Sie "esmodules" : true im Feld targets Ihrer .babelrc-Datei angeben.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Viele neuere ECMAScript-Funktionen, die mit Babel kompiliert wurden, werden bereits in Umgebungen unterstützt, die JavaScript-Module unterstützen. So können Sie einfacher dafür sorgen, dass nur transpilierter Code für Browser verwendet wird, die ihn tatsächlich benötigen.
In Browsern, die Module unterstützen, werden Scripts mit dem Attribut nomodule ignoriert.
Umgekehrt ignorieren Browser, die keine Module unterstützen, Skriptelemente mit type="module". Sie können also ein Modul sowie einen kompilierten Fallback einschließen.
Im Idealfall sind die beiden Versionsskripts einer Anwendung wie folgt enthalten:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
In Browsern, die Module unterstützen, wird main.mjs abgerufen und ausgeführt und compiled.js ignoriert.
In Browsern, die keine Module unterstützen, ist das Gegenteil der Fall.
Wenn Sie webpack verwenden, können Sie in Ihren Konfigurationen unterschiedliche Ziele für zwei separate Versionen Ihrer Anwendung festlegen:
- Eine Version nur für Browser, die Module unterstützen.
- Eine Version mit einem kompilierten Script, das in allen älteren Browsern funktioniert. Dies hat eine größere Dateigröße zur Folge, da die Transpilierung eine größere Bandbreite von Browsern unterstützen muss.
Vielen Dank an Connor Clark und Jason Miller für ihre Rezensionen.