Schauen Sie sich unseren Babel 7 und Webpack 4 Videokurs an:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Tragen Sie Ihre JavaScript-Kenntnisse auf die nächste Stufe:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel ist eine Toolchain, die hauptsächlich dazu verwendet wird, ECMAScript 2015+ Code in eine abwärtskompatible Version von JavaScript in aktuellen und älteren Browsern oder Umgebungen zu konvertieren. ECMAScript 2015+ ist gleichbedeutend mit ES6+.
Man kann sich Babel als Übersetzer vorstellen. ES6+ JS bietet uns viele neue Funktionen und Syntaxen. Sie können unsere Entwicklungseffizienz enorm verbessern. Aber im Moment sind die meisten dieser neuen Funktionen in den Browsern nicht zu erkennen. Um ein Gleichgewicht zwischen Kompatibilität und Entwicklungskomfort und -effizienz zu finden, wurde Babel entwickelt.
Wir Programmierer schreiben Codes in ES6+ und bitten dann Babel, sie in Codes zu übersetzen, die Browser verstehen können.
Babel selbst kann nur die neuen Syntaxen übersetzen. ES6+ hat auch viele neue APIs wie Promise, Map, Object.assign(), etc. hinzugefügt. Neue API bedeutet neue Objekte, Eigenschaften und Methoden. API ist nur ein schicker Name. Lassen Sie sich davon nicht einschüchtern. Um mit ihnen umgehen zu können, müssen wir diese APIs in ES5 hinzufügen. Diese Aufgabe wird von einem Assistenten von Babel übernommen. Wir werden Ihnen später zeigen, wer dieser Assistent ist.
Denken Sie also an diese Schlussfolgerung: Babel übersetzt neue Syntaxen und sein Assistent kümmert sich um neue APIs.
Gehen Sie zunächst auf die offizielle Website von Babel und klicken Sie auf die Schaltfläche Docs.
Babel kümmert sich um die Syntaxübersetzung. Polyfill kümmert sich um fehlende Funktionen. Die Antwort auf die Frage von vorhin: Der Assistent von Babel ist Polyfill.
Abgesehen von der Übersetzung von ES6+ kann Babel auch JSX und TypeScript verarbeiten. Hier kommt also ein weiteres Konzept ins Spiel: Preset. Preset ist die Übersetzung, die Babel verwendet. Es steuert, wie Babel die Übersetzung vornimmt.
So, jetzt haben Sie zwei wichtige Konzepte von Babel kennengelernt: Preset und Polyfill.
Als Nächstes installieren wir Babel.
Babel-Installation und -Konfiguration:
Dies ist der Installationsbefehl, der im offiziellen Handbuch von Babel vorgeschlagen wird. Wenn Sie genau hinsehen, werden Sie feststellen, dass tatsächlich vier Pakete installiert werden, drei als Entwicklungsabhängigkeit und eines als Produktionsabhängigkeit.
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, ist, wie der Name schon sagt, der Kern des gesamten Babel-Programms.
Babel/cli ist die Befehlszeilenschnittstelle. Wir benutzen sie, um mit Babel zu kommunizieren.
Babel selbst weiß nicht, wie man ES6-Codes übersetzt. Es benötigt Plugins, die ihm sagen, wie es geht. Es gibt viele Plugins. Sie einzeln zu installieren und einzustellen ist eine arbeitsintensive Aufgabe. Daher ist die beste Lösung, babel preset zu verwenden. Eine Voreinstellung ist eine Sammlung von Plugins. Das von uns verwendete Preset ist preset-env.
Babel/preset-env ist der Standard, den Babel 7 zur Übersetzung von ES6+ in ES5 verwendet. In Babel 7 hat preset-env preset-2015/6/7, etc. ersetzt.
Babel/polyfill ist für das Hinzufügen von ES6+ Features in ES5. Warum müssen wir das also tun?
Die neue Syntax ist nicht der einzige Unterschied zwischen ES6 und ES5. ES6 hat bereits viele neue APIs erhalten. API ist nur ein schicker Name für eingebaute Objekte. Diese neuen eingebauten Objekte sind sehr nützlich, aber das Problem ist, dass sie in der ES5-Umgebung nicht vorhanden sind.
Die einzige Lösung ist, diese eingebauten Objekte in die ES5-Umgebung einzufügen. Dafür ist polyfill da.
Lassen Sie uns unser eigenes Terminal einschalten und ein Projekt einrichten.
Zuerst schalten wir das Terminal ein und erstellen ein Projekt-Stammverzeichnis. Dann legen wir eine CD ein und starten npm init.
Nächstens kopieren wir die vier Installationsbefehle aus dem offiziellen Handbuch von Babel und fügen sie im Terminal ein.
Wenn die Installation abgeschlossen ist, sollten Sie sehen, dass diese vier Pakete installiert werden:
Lassen Sie uns unser Projekt in VSC öffnen und das Paket überprüfen.json.
Cli, core und preset-env sind Entwicklungsabhängigkeiten. polyfill ist eine Produktionsabhängigkeit.
Sie können sich polyfill als einen Quellcode vorstellen. Es speichert die Quellen für alle neuen ES6-Features.
ES5 + polyfill = ES6.
Bevor wir Babel verwenden können, müssen wir es konfigurieren. Der beste Weg, dies zu tun, ist die Erstellung einer Datei, in der Babel-Konfigurationsinformationen gespeichert werden.
In Babel 6 speichern wir Konfigurationsinformationen in .babelrc oder package.json.
Babel 7 bietet uns eine neue Lösung: babel.config.js.
Das Babel-Handbuch bietet uns eine Vorlage für die Erstellung von babel.config.js. Wir müssen sie nur in unseren Projektstammordner kopieren.
Zunächst exportieren wir mit dem Modul ein Objekt.
Dann definieren wir darin eine Eigenschaft presets. Der Wert der Voreinstellungen ist ein Array.
In das Array legen wir ein weiteres Array.
Das erste Element des Child-Arrays ist die Voreinstellung, die wir verwenden wollen. Hier setzen wir es auf @babel/env oder @babel/preset-env.
Das zweite Element ist ein Konfigurationsobjekt. In ihm gibt es zwei Eigenschaften: targets und useBuiltIns. Targets ist für die Konfiguration von Browsern und useBuiltIns für Polyfills.
Nun haben wir Babel installiert und konfiguriert.
Als Nächstes wollen wir es testen.
Im Hauptverzeichnis des Projekts erstellen wir eine neue Datei: es6.js.
Dann schalten wir das Terminal ein und geben den Befehl babel ein: npx babel es6.js. Dies ist, was wir erhalten:
ES6 let wurde in ES5 var umgewandelt.
NPX babel ist das gleiche wie node_modules/.bin/babel
Jetzt haben wir unsere erste ES6-Datei erfolgreich „gebabelt“.
Es kann sein, dass man die übersetzte Datei als eigenständige Datei ausgeben möchte. In diesem Fall benötigen Sie -o oder – output-dir.
-o und – output-file können nur eine Datei auf einmal übersetzen. In Ihrer realen Entwicklung möchten Sie vielleicht ES6-Dateien in einem Verzeichnis speichern und jede Datei in diesem Verzeichnis übersetzen.
Zum Beispiel erstellen wir im Hauptverzeichnis des Projekts zwei Unterverzeichnisse: ES6 und ES5. Wir schreiben unsere ES6-Dateien in das Verzeichnis ES6. Dann „bunkern“ wir sie in das Verzeichnis ES5. HTML-Dateien verknüpfen JS-Dateien aus dem dir es5.
In diesem Fall ist der Befehl, den wir brauchen, npx babel ES6 -d ES5 oder npx babel ES6 – out-dir ES5.
Nun werden alle Dateien in dir ES6 in dir ES5 „babeliert“.
Als nächstes zeigen wir Ihnen, was polyfill für uns tun kann.
Dies ist die Datei, die wir babelen wollen:
Sie verwendet viele ES6-APIs, die in ES5 nicht existieren. Die einzige Möglichkeit, sie in einer ES5-Umgebung funktionsfähig zu machen, besteht darin, die Quellcodes dieser neuen APIs in die ES5-Umgebung einzufügen. Dafür ist Polyfill da, und das ist auch der Grund, warum Polyfill als eine Produktionsabhängigkeit installiert wird. Wir brauchen es in der Produktion.
Hier ist eine weniger genaue Analogie, um zu verstehen, warum wir Polyfill brauchen.
Angenommen, wir haben ein jQuery-Programm. Wir können unser jQuery-Programm nicht direkt ausführen. Wir müssen zuerst den jQuery-Quellcode einbinden. Polyfill ist der jQuery-Quellcode, den wir einbinden.
Das ist die „gelabelte“ ES5-Datei, die wir bekommen haben:
Sehen Sie all diese erforderlichen Dateien? Sie werden von polyfill geladen. Aber die „babeled“-Datei kann nicht direkt von HTML-Dateien verwendet werden. Wir müssen sie mit Webpack bündeln. Aber alle benötigten „API-Quellcodes“ wurden geladen.
Diese Einstellung wird durch die useBuiltIns-Eigenschaft in babel.config.js gesteuert. Diese Eigenschaft hat drei Werte: usage, false und entry.
Usage ist der beste und am häufigsten verwendete Wert. Es ist auch das, was wir empfehlen.
Abgesehen von usage hat useBuiltIns zwei weitere Werte: false und entry.
False schaltet polyfill ab. Das bedeutet, dass Sie die benötigten APIs manuell verknüpfen müssen. Das sollte man auf keinen Fall tun.
Wenn man entry verwendet, muss man „require“ @babel/polyfillEntry am Anfang der Datei angeben. Dann prüft babel zuerst die Eigenschaft targets, um herauszufinden, was die Zielbrowser sind. Es werden alle APIs geladen, die vom Zielbrowser nicht unterstützt werden. Auf diese Weise werden natürlich viele nicht benötigte APIs geladen.
Zusammenfassend kann man sagen, dass useBuiltIns auf usage gesetzt wird und Babel den Rest für Sie erledigt.
Sehen Sie sich unseren VOLLSTÄNDIGEN Babel 7 und Webpack 4 Kurs auf Udemy an:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Sehen Sie sich unseren VOLLSTÄNDIGEN Webentwicklungskurs auf Udemy an:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD