Einrichten eines ES6 -Projekts mit Babel und Webpack-js-Tutorial-php.cn

Einrichten eines ES6 -Projekts mit Babel und Webpack

In diesem Artikel werden wir mithilfe von Babel und Webpack ein Build -Setup für den Umgang mit modernen JavaScript (in Webbrowsern ausgeführt) erstellen.

Dies ist erforderlich, um sicherzustellen, dass insbesondere unser moderner JavaScript -Code mit einer breiteren Reihe von Browsern kompatibel ist, als es sonst möglicherweise sein könnte.

JavaScript entwickelt sich wie die meisten webbezogenen Technologien ständig weiter. In den guten alten Zeiten konnten wir ein paar <script> -Tags in eine Seite fallen lassen, vielleicht JQuery und ein paar Plugins einschließen, und dann gut zu gehen. Seit der Einführung von ES6 wurde die Dinge jedoch zunehmend komplizierter. Die Browser -Unterstützung für neuere Sprachfunktionen ist häufig fleckig, und da JavaScript -Apps ehrgeiziger werden, verwenden Entwickler Module, um ihren Code zu organisieren. Dies bedeutet, dass Sie, wenn Sie heute modernes JavaScript schreiben, einen Build -Schritt in Ihren Prozess einführen müssen. Wie Sie aus den Links darunter sehen können, erhöht die Konvertierung von ES6 auf ES5 die Anzahl der Browser, die wir unterstützen können, dramatisch. <ul> <li> ES6 -Kompatibilität <li> ES5 -Kompatibilität Der Zweck eines Build -Systems ist es, den Arbeitsablauf zu automatisieren, um unseren Code für Browser und Produktion vorzubereiten. Dies kann Schritte wie den Umzugscode in einen unterschiedlichen Standard, das Kompilieren von SASS zu CSS, Bündelungsdateien, Minimierungs- und Komprimierungscode und viele andere umfassen. Um sicherzustellen, dass diese konsequent wiederholbar sind, ist ein Build -System erforderlich, um die Schritte in einer bekannten Sequenz aus einem einzigen Befehl zu initiieren. <h2 > Key Takeaways <ul > <li> Verwenden Sie Babel und WebPack, um ein modernes JavaScript -Projekt einzurichten, um sicherzustellen, dass der ES6 -Code über eine breitere Palette von Webbrowsern kompatibel ist. <li> Beginnen Sie mit der Erstellung einer Projektstruktur mit einer Paket.json -Datei und organisieren Sie Code in SRC- und öffentlichen Verzeichnissen für Quelle und transpilierten JavaScript. <li> Babel installieren, um ES6 in ES5 zu transplilieren, auf bestimmte Browserversionen zu zielen und diesen Vorgang mithilfe von NPM -Skripten zu automatisieren. <li> Implementieren Sie ES6 -Module zum effektiven Verwalten und Modularisieren von JavaScript -Code, obwohl die Kompatibilität mit älteren Browsern wie IE11 begrenzt bleibt. <li> Integrieren Sie WebPack, um JavaScript -Module in einzelne oder mehrere Dateien zu bündeln, Serveranforderungen zu reduzieren und Ladezeiten zu optimieren. <li> Entwicklungs-Workflow mit WebPack-Beobachtungs- und Dev-Server-Funktionen verbessern, um den Browser automatisch wieder aufzubauen und zu aktualisieren. <h2 > Voraussetzungen Um mitzumachen, müssen Sie sowohl Node.js als auch NPM installieren lassen (sie werden zusammen verpackt). Ich würde empfehlen, einen Versionsmanager wie NVM zu verwenden, um Ihre Knoteninstallation zu verwalten (hier ist wie). Wenn Sie Hilfe mit NPM in den Griff bekommen möchten, lesen Sie die Anfänger-freundliche NPM-Tutorial von SitePoint. <h2 > Einrichten Erstellen Sie einen Root -Ordner irgendwo auf Ihrem Computer und navigieren Sie ihn von Ihrer Terminal-/Befehlszeile in ihn. Dies wird Ihr <root> Ordner sein. Erstellen Sie damit eine Paket.json -Datei: <pre >npm init -y Hinweis: Das -y -Flag erstellt die Datei mit Standardeinstellungen und bedeutet, dass Sie keine der üblichen Details aus der Befehlszeile abschließen müssen. Sie können später in Ihrem Code -Editor geändert werden, wenn Sie möchten. Machen Sie die Verzeichnisse SRC, SRC/JS und öffentlich. Der SRC/JS -Ordner wird dort sein, wo wir unseren unverarbeiteten Quellcode einsetzen, und der öffentliche Ordner wird dort sein, wo der transpilierte Code endet. <h2 > mit Babel umwandeln Um uns in Gang zu bringen, werden wir Babel-Cli installieren, was die Möglichkeit bietet, ES6 in ES5 und Babel-Preset-ENV umzuwandeln, wodurch wir bestimmte Browser-Versionen mit dem transpilierten Code abzielen. <🎜 🎜 <🎜 🎜 <pre >npm install babel-cli babel-preset-env --save-dev Sie sollten jetzt Folgendes in Ihrem Paket sehen.json: <pre >"devDependencies": { "babel-cli": "^6.26.0", "babel-preset-env": "^1.6.1" } Während wir uns in der Datei package.json befinden, ändern wir den Abschnitt Skripte, um so zu lesen: <pre >"scripts": { "build": "babel src -d public" }, Dies gibt uns die Möglichkeit, Babel über ein Skript zu rufen, anstatt jedes Mal direkt aus dem Terminal. Wenn Sie mehr über NPM -Skripte und was sie tun können, sehen Sie sich dieses SitePoint -Tutorial an. Schließlich müssen wir eine .babelRC -Konfigurationsdatei erstellen, bevor wir testen können, ob Babel seine Sache tut. Auf diese Weise wird sich unser Babel-Preset-Env-Paket für seine Transpileparameter beziehen. Erstellen Sie eine neue Datei in Ihrem Verzeichnis <root> namens .babelrc und fügen Sie Folgendes ein: <pre >{ "presets": [ [ "env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } } ] ] } Auf diese Weise werden Babel für die letzten beiden Versionen jedes Browsers sowie Safari bei V7 oder höher eingesetzt. Weitere Optionen sind verfügbar, je nachdem, welche Browser Sie unterstützen müssen. Mit dem gespeicherten Sparen können wir jetzt Dinge mit einer Beispiel -JavaScript -Datei testen, die ES6 verwendet. Für die Zwecke dieses Artikels habe ich eine Kopie von Leftpad so geändert, dass die ES6 -Syntax an einer Reihe von Orten verwendet wird: Vorlagenliterale, Pfeilfunktionen, const und let. <pre >"use strict"; function leftPad(str, len, ch) { const cache = [ "", " ", " ", " ", " ", " ", " ", " ", " ", " " ]; str = str + ""; len = len - str.length; if (len <= 0) return str; if (!ch && ch !== 0) ch = " "; ch = ch + ""; if (ch === " " && len < 10) return () => { cache[len] + str; }; let pad = ""; while (true) { if (len & 1) pad += ch; len >>= 1; if (len) ch += ch; else break; } return `${pad}${str}`; } speichern Sie dies als src/js/links.js und von Ihrem Terminal von Folgendes: <pre >npm run build Wenn alles wie beabsichtigt ist, sollten Sie in Ihrem öffentlichen Ordner jetzt eine neue Datei namens JS/Leftpad.js finden. Wenn Sie das öffnen, werden Sie feststellen, dass es keine ES6 -Syntax mehr enthält und so folgt: <pre >"use strict"; function leftPad(str, len, ch) { var cache = ["", " ", " ", " ", " ", " ", " ", " ", " ", " "]; str = str + ""; len = len - str.length; if (len <= 0) return str; if (!ch && ch !== 0) ch = " "; ch = ch + ""; if (ch === " " && len < 10) return function () { cache[len] + str; }; var pad = ""; while (true) { if (len & 1) pad += ch; len >>= 1; if (len) ch += ch;else break; } return "" + pad + str; } <h2 > organisieren Ihren Code mit ES6 -Modulen Ein ES6 -Modul ist eine JavaScript -Datei mit Funktionen, Objekten oder primitiven Werten, die Sie einer anderen JavaScript -Datei zur Verfügung stellen möchten. Sie exportieren von einem und importieren in den anderen. Jedes ernsthafte moderne JavaScript -Projekt sollte in Betracht ziehen, Module zu verwenden. Sie ermöglichen es Ihnen, Ihren Code in in sich geschlossene Einheiten zu unterteilen und damit die Aufrechterhaltung der Dinge zu erleichtern. Sie helfen Ihnen, die Verschmutzung der Namespace zu vermeiden. Und sie helfen, Ihren Code tragbarer und wiederverwendbarer zu machen. Während die Mehrheit der ES6 -Syntax in modernen Browsern weit verbreitet ist, ist dies bei Modulen noch nicht der Fall. Zum Zeitpunkt des Schreibens sind sie in Chrome, Safari (einschließlich der neuesten iOS -Version) und Edge erhältlich. Sie sind hinter einer Flagge in Firefox und Oper versteckt. und sie sind weder in IE11 noch in den meisten mobilen Geräten verfügbar (und werden es wahrscheinlich nie sein). Im nächsten Abschnitt werden wir uns ansehen, wie wir Module in unser Build -Setup integrieren können. <h3 > exportieren Das Keyword von Exports ermöglicht es uns, unsere ES6 -Module anderen Dateien zur Verfügung zu stellen, und gibt uns zwei Optionen dafür - benannt und Standard. Mit dem benannten Export können Sie mehrere Exporte pro Modul haben, und mit einem Standard -Export haben Sie nur einen pro Modul. Named Expors sind besonders nützlich, wenn Sie mehrere Werte exportieren müssen. Sie haben beispielsweise ein Modul mit einer Reihe von Dienstprogrammfunktionen, die an verschiedenen Stellen innerhalb Ihrer Apps zur Verfügung gestellt werden müssen. Verwandeln wir also unsere Linkspartdatei in ein Modul, das wir dann in einer zweiten Datei benötigen können. <h4 > genannt Export Um einen benannten Export zu erstellen, fügen Sie Folgendes unten in der Linksdatei hinzu: <pre >npm init -y wir können auch die "strenge Verwendung" entfernen; Deklaration von oben in der Datei, wie die Module standardmäßig im strengen Modus ausgeführt werden. <h4 > defult export Da es nur eine einzige Funktion in der Leftpad -Datei exportiert werden muss, ist es möglicherweise ein guter Kandidat für die Verwendung von Exportverwaltungen stattdessen: <pre >npm install babel-cli babel-preset-env --save-dev Sie können den "strengen Gebrauch" entfernen; Deklaration von oben in der Datei. <h3 > import Um exportierte Module zu verwenden, müssen wir sie jetzt in die Datei (Modul) importieren, in der wir sie verwenden möchten. Für die Option Export -Standard -Option kann das exportierte Modul unter einem beliebigen Namen importiert werden, den Sie auswählen möchten. Zum Beispiel kann das Linksmodul wie SO importiert werden: <pre >"devDependencies": { "babel-cli": "^6.26.0", "babel-preset-env": "^1.6.1" } oder es könnte als anderer Name importiert werden, wie SO: <pre >"scripts": { "build": "babel src -d public" }, funktionell funktionieren beide genau gleich, aber es ist offensichtlich sinnvoll, entweder denselben Namen zu verwenden, unter dem er exportiert wurde, oder etwas, das den Import verständlich macht - vielleicht, wenn der exportierte Name mit einem anderen variablen Namen zusammenstößt, der bereits existiert im Empfangsmodul. Für die benannte Exportoption müssen wir das Modul mit demselben Namen importieren, unter dem es exportiert wurde. Für unser Beispielmodul importieren wir es auf ähnliche Weise wie die Export -Standardsyntax, aber in diesem Fall müssen wir den importierten Namen mit lockigen Klammern einwickeln: <pre >{ "presets": [ [ "env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } } ] ] } Die Zahnspangen sind mit einem benannten Export obligatorisch und es wird scheitern, wenn sie nicht verwendet werden. Es ist möglich, bei Bedarf den Namen eines benannten Exportports für Import zu ändern. Damit müssen wir unsere Syntax mit einem Import [Modul] als [Pfad] -Syntax ein wenig ändern. Wie beim Export gibt es eine Vielzahl von Möglichkeiten, dies zu tun.<pre >npm init -y Auch die Namensänderung ist ein wenig unsinnig, aber es zeigt den Punkt, dass sie in irgendetwas geändert werden können. Sie sollten sich jederzeit gute Namenspraktiken halten, es sei denn, Sie schreiben Routinen für die Vorbereitung von Obst-basierten Rezepten. <h3 > Verbrauch des exportierten Moduls Um das exportierte Link -Modul zu verwenden, habe ich die folgende Index.js -Datei im Ordner SRC/JS erstellt. Hier schaue ich durch eine Reihe von Seriennummern und präfixe sie mit Nullen, um sie zu einer achtcharakterischen Zeichenfolge zu machen. Später verwenden wir dies und veröffentlichen sie auf einer HTML -Seite in ein bestelltes Listenelement. Beachten Sie, dass dieses Beispiel die Standard -Exportsyntax verwendet: <pre >npm install babel-cli babel-preset-env --save-dev Führen Sie das Build -Skript aus dem Verzeichnis <root> aus: <pre >"devDependencies": { "babel-cli": "^6.26.0", "babel-preset-env": "^1.6.1" } Babel erstellt nun eine Index.js -Datei im Verzeichnis der Öffentlichkeit/JS. Wie bei unserer Datei linkSpad.js sollten Sie sehen, dass Babel die gesamte ES6 -Syntax ersetzt und nur die ES5 -Syntax zurückgelassen hat. Möglicherweise stellen Sie auch fest, dass die ES6-Modulsyntax in das notenbasierte Modul.exports konvertiert wurde. Dies bedeutet, dass wir sie aus der Befehlszeile ausführen können: <pre >"scripts": { "build": "babel src -d public" }, Ihr Terminal sollte jetzt eine Reihe von Strings ausmelden, die mit Nullen vorangestellt sind, um sie alle acht Zeichen lang zu machen. Damit ist es Zeit, einen Blick auf Webpack zu werfen. <h2 > Einführung von Webpack und Integration in Babel Wie bereits erwähnt, ermöglichen ES6 -Modulen dem JavaScript -Entwickler, seinen Code in überschaubare Brocken zu zerlegen, aber die Folge davon ist, dass diese Brocken dem anspruchsvollen Browser zugestellt werden müssen und möglicherweise Dutzende zusätzlicher HTTP -Anfragen zu den Anfragen hinzugefügt werden müssen. Server - etwas, das wir wirklich vermeiden sollten. Hier kommt Webpack ins Spiel. WebPack ist ein Modul -Bundler. Sein Hauptzweck ist es, Ihre Anwendung zu verarbeiten, indem Sie alle Abhängigkeiten aufspüren und sie dann alle in einen oder mehrere Bundles verpacken, die im Browser ausgeführt werden können. Es kann jedoch weit mehr sein, je nachdem, wie es konfiguriert ist. Webpack -Konfiguration basiert auf vier Schlüsselkomponenten: <ul> <li> Ein Einstiegspunkt <li> Ein Ausgabestandort <li> lader <li> Plugins Eintrag: Dadurch enthält der Startpunkt Ihrer Anwendung, von dem Webpack seine Abhängigkeiten identifizieren kann. Ausgabe: Dies gibt an, wo das verarbeitete Bundle gespeichert wird. Lader: Dies ist eine Möglichkeit, eine Sache als Eingabe umzuwandeln und etwas anderes als Ausgabe zu erzeugen. Sie können verwendet werden, um die Funktionen von WebPack zu erweitern, um mehr als nur JavaScript -Dateien zu verarbeiten, und weshalb diese auch in gültige Module umwandeln. Plugins: Diese werden verwendet, um die Funktionen von Webpack in andere Aufgaben zu erweitern, die über die Bündelung hinausgehen - wie Minifikation, Linie und Optimierung. Um WebPack zu installieren, führen Sie Folgendes aus Ihrem <root> verzeichnis aus: <pre >npm init -y Dies installiert Webpack lokal im Projekt und bietet auch die Möglichkeit, Webpack über die Befehlszeile durch das Hinzufügen von Webpack-Cli auszuführen. Sie sollten jetzt WebPack in Ihrer Paket.json -Datei angezeigt. Ändern Sie in dieser Datei den Abschnitt Skripten wie folgt, damit es jetzt weiß, dass Sie Webpack anstelle von Babel direkt verwenden: <pre >npm install babel-cli babel-preset-env --save-dev Wie Sie sehen, ruft dieses Skript eine Datei webpack.config.js auf. Erstellen Sie dies also in unserem <root> Verzeichnis mit dem folgenden Inhalt: <pre >"devDependencies": { "babel-cli": "^6.26.0", "babel-preset-env": "^1.6.1" } Dies ist mehr oder weniger die einfachste Konfigurationsdatei, die Sie mit WebPack benötigen. Sie können sehen, dass die früher beschriebenen Abschnitte und Ausgabe Eintrag und verwendet werden (es könnte allein mit diesen funktionieren), enthält aber auch einen Modus: "Entwicklung" Einstellung. WebPack hat die Möglichkeit, Modi „Entwicklung“ oder „Produktion“ zu verwenden. Einstellungsmodus: 'Development' optimiert für Build -Geschwindigkeit und Debugging, während der Modus: 'Produktion' für die Ausführungsgeschwindigkeit bei Laufzeit und Ausgabedatei optimiert. Es gibt eine gute Erklärung der Modi in Tobias Koppers Artikel "Webpack 4: Modus und Optimierung", falls Sie mehr darüber erfahren möchten, wie sie über die Standardeinstellungen hinaus konfiguriert werden können. Entfernen Sie als nächstes alle Dateien aus dem Ordner der Öffentlichkeit/JS. Dann führen Sie dies aus: <pre >"scripts": { "build": "babel src -d public" }, Sie werden sehen, dass es jetzt eine einzelne ./public/bundle.js -Datei enthält. Öffnen Sie jedoch die neue Datei und die beiden Dateien, mit denen wir begonnen haben, sehen ziemlich anders aus. Dies ist der Abschnitt der Datei, der den Code index.js enthält. Obwohl es aus unserem Original ziemlich stark modifiziert ist, können Sie seine Variablennamen aussuchen: <pre >{ "presets": [ [ "env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } } ] ] } Wenn Sie Knoten public/js/bündel.js aus dem Ordner <root> ausführen, sehen Sie, dass Sie die gleichen Ergebnisse wie zuvor erhalten haben. <h3 > Transporing Wie bereits erwähnt, können Sie lader erlauben, eine Sache in etwas anderes umzuwandeln. In diesem Fall möchten wir, dass ES6 in Es5 umgewandelt wird. Dazu benötigen wir ein paar weitere Pakete: <pre >"use strict"; function leftPad(str, len, ch) { const cache = [ "", " ", " ", " ", " ", " ", " ", " ", " ", " " ]; str = str + ""; len = len - str.length; if (len <= 0) return str; if (!ch && ch !== 0) ch = " "; ch = ch + ""; if (ch === " " && len < 10) return () => { cache[len] + str; }; let pad = ""; while (true) { if (len & 1) pad += ch; len >>= 1; if (len) ch += ch; else break; } return `${pad}${str}`; } Um sie zu verwenden, benötigt die webpack.config.js einen Modulabschnitt nach dem Abschnitt Ausgabe wie SO: <pre >npm run build Hierbei wird eine Regex-Anweisung verwendet, um die JavaScript-Dateien zu identifizieren, die mit dem Babel-Loader transpiliert werden sollen, während sie etwas im Ordner node_modules ausschließt. Zuletzt wird der Babel-Loader aufgefordert, das zuvor installierte Babel-Preset-Env-Paket zu verwenden, um die in der .babelrc-Datei festgelegten Transpileparameter festzulegen. Mit dem können Sie dies umgeben: <pre >"use strict"; function leftPad(str, len, ch) { var cache = ["", " ", " ", " ", " ", " ", " ", " ", " ", " "]; str = str + ""; len = len - str.length; if (len <= 0) return str; if (!ch && ch !== 0) ch = " "; ch = ch + ""; if (ch === " " && len < 10) return function () { cache[len] + str; }; var pad = ""; while (true) { if (len & 1) pad += ch; len >>= 1; if (len) ch += ch;else break; } return "" + pad + str; } Überprüfen Sie dann die neue Öffentlichkeit/js/bündel.js und Sie werden sehen, dass alle Spuren der ES6 -Syntax verschwunden sind, aber es erzeugt immer noch die gleiche Ausgabe wie zuvor. <h2 > bringen es in den Browser Nachdem Sie ein funktionierendes Webpack und Babel -Setup erstellt haben, ist es an der Zeit, dem Browser das zu bringen, was wir getan haben. Eine kleine HTML -Datei ist erforderlich, die im Ordner <root> wie unten erstellt werden sollte: <🎜><pre >npm init -y Es ist nichts kompliziertes darin. Die wichtigsten Punkte sind das <ol> Element, in dem das Array der Zahlen stattfindet, und das <Script> </script> -Element kurz vor dem Schließen

Das obige ist der detaillierte Inhalt vonEinrichten eines ES6 -Projekts mit Babel und Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!