Eine Einführung in Parcel.js, den No-Config Web Application Bundler

Eine Einführung in Parcel.js, den No-Config Web Application Bundler

Eine Einführung in Parcel.js, den No-Config Web Application Bundler
СОДЕРЖАНИЕ
02 июня 2020

Dieser Beitrag ist Ihre Einführung in Parcel.js, das selbsternannte "Blitzschneller Webanwendungsbündler ohne Konfiguration." Hier finden Sie alles, was Sie wissen müssen, um damit zu beginnen:


Viele Front-End-Entwickler sind frustriert über die Komplexität, die heute mit dem Erstellen von Web-Apps verbunden ist. Es ist ziemlich üblich, eine Art Build- oder Bundle-Tool in einen Front-End-Workflow aufzunehmen. Daher haben viele Entwickler die Verwendung eines Front-End-Tools wie Webpack in Betracht gezogen.

Webpack ist der beliebteste Bundler und folgte auf Require.js, Rollup und ähnlichen Lösungen. Die Lernkurve für ein Tool wie Webpack ist jedoch steil. Der Einstieg in das Webpack ist aufgrund seiner komplexen Konfigurationen nicht einfach. Infolgedessen hat sich in den letzten Jahren eine andere Lösung herausgebildet. Dieses Tool ist nicht unbedingt ein Spitzenreiter, sondern eine leichter verdauliche Alternative in der Front-End-Modul-Bundler-Landschaft. Wir stellen vor: Parcel.js.

Einführung in Parcel.js

Parcel.js (parceljs.org) ist genau das, was viele Anfänger bis Fortgeschrittene wollen: Ein einfacher Bundler mit geringer Konfiguration, mit dem Sie schnell einsatzbereit sind.

Ich hoffe, dass dieses Paket-Tutorial eine leicht verständliche Einführung in dieses Tool bietet. Ich werde die Grundlagen behandeln und Ihnen dann zeigen, wie Sie mit Parcel eine einfache Web-App bündeln, die Babel und Sass enthält.

�� Inhaltsverzeichnis:

  1. Warum einen Web-App-Bundler verwenden? #
  2. Installieren von Parcel.js #
  3. Erstellen eines Dateieintragspunkts #
  4. Der dist / Ordner #
  5. Verwenden von Parcel.js mit Babel #
  6. Verwenden von Parcel.js mit Sass #
  7. Bündeln mehrerer Skripte mit Parcel #
  8. Code-Aufteilung mit Parcel.js #
  9. Die Produktion wird mit Parcel.js # erstellt
  10. Irgendwelche Nachteile bei der Verwendung von Paket? #

Parcel.js Website

Warum einen Web-App-Bundler verwenden??

Ich werde nicht zu viel Zeit damit verbringen, die Gründe für die Verwendung eines App-Bundlers wie Parcel.js zu diskutieren, da dieses Thema sicherlich schon früher behandelt wurde. Im Folgenden finden Sie eine grundlegende Übersicht über die Vorteile der Verwendung eines solchen Tools:

  • Ihre App hat weniger HTTP-Anforderungen, da Skripte oder Stylesheets kombiniert werden
  • Skripte und Stylesheets können bei Bedarf geladen werden, wodurch die Leistung weiter verbessert wird
  • Skripte und Stylesheets können automatisch minimiert werden, um dem Benutzer weniger Kilobyte zu liefern
  • Bündelungs- und Minimierungsarbeiten werden automatisch vom Tool ausgeführt, wodurch die manuelle Arbeit minimiert wird
  • Entwicklungsdateien sind modular aufgebaut, sodass Ihr Code viel einfacher zu warten und zu debuggen ist

Wie Sie sehen, gibt es viele Vorteile, die sich hauptsächlich auf die Leistung und die Projektwartung beziehen. Es gibt sicherlich viele Gründe, einen Bundler zu verwenden, wenn Sie dies noch nicht in Betracht gezogen haben.

Beginnen wir mit den Grundlagen für die Inbetriebnahme von Parcel.js. Ich werde die Funktionen in diesem Tutorial langsam anhand einiger einfacher Beispiele durchgehen, denen Sie leicht folgen können.

Parcel.js installieren

Sie können Parcel.js mit Yarn oder npm in Ihrem Terminal installieren. Für dieses Tutorial verwende ich npm. Hier ist der Befehl, um es global zu installieren, damit Sie es für jedes Projekt verwenden können:

npm install parcel-bundler -g

Das Flag -g installiert es global. Wenn Sie es nur für ein einzelnes Projekt installieren und zu den devDependencies Ihres Projekts in package.json hinzufügen möchten, können Sie denselben Befehl im Stammordner des Projekts mit dem Flag –save-dev anstelle von -g ausführen:

npm install parcel-bundler –save-dev

Mit der globalen Installation (die der häufigste Anwendungsfall ist) können Sie jedes Projekt mit dem Befehl init initiieren. Verwenden Sie das Terminal, um zu dem Ordner zu navigieren, den Sie als Stammverzeichnis Ihrer Anwendung verwenden möchten, und führen Sie Folgendes aus:

npm init -y

Das Flag -y verhindert, dass npm Fragen stellt, wobei die Standardeinstellungen für das Setup verwendet werden. Angenommen, mein Projekt heißt parcel-demo, dann wird eine Datei package.json im Stammverzeichnis erstellt, die folgendermaßen aussieht:

{
"Name":: "Paket-Demo",
"Ausführung":: "1.0.0",
"Beschreibung":: "",
"Main":: "index.js",
"Skripte": {
"Prüfung":: "echo \"Fehler: kein Test angegeben \" && Ausfahrt 1"
}},
"Schlüsselwörter": [],
"Autor":: "",
"Lizenz":: "ISC"
}}

Wenn Sie eines der oben genannten Probleme aufgrund Ihrer mangelnden Vertrautheit mit npm finden, können Sie sich mein umfassendes Buch ansehen Tutorial auf npm. Es soll Front-End-Webentwicklern helfen, das Tool zu verstehen.

Erstellen eines Dateieintragspunkts

Für ein grundlegendes Projekt-Setup verwende ich Parcel.js für eine index.html-Datei, die auf eine primäre JavaScript-Datei namens index.js verweist (wie in der Datei package.json gezeigt). Diese HTML-Datei dient als Paket-Einstiegspunkt. Meine HTML-Datei enthält ein Skriptelement, das auf meine JavaScript-Datei verweist. Sie sieht also ungefähr so ​​aus:

html>
<html>
<Kopf>
<Titel>Paket Demotitle>
Kopf>
<Körper>
<Skript src ="./js/index.js">Skript>
Körper>
html>

Sobald ich die richtige HTML- und JavaScript-Datei eingerichtet habe, kann ich den integrierten Entwicklungsserver von Parcel starten, indem ich Folgendes in meinem Terminal im Ordner meines Projekts ausführe:

Paketindex.html

Dadurch wird der Server gestartet und es wird angegeben, welche Datei als Einstiegspunkt verwendet werden soll. Als Ergebnis erhalte ich in meiner Terminalsitzung die folgende Meldung:

Server läuft unter http: // localhost: 1234
√ Eingebaut in 887ms.

Ich kann jetzt http: // localhost: 1234 / in meinem Browser öffnen, um anzuzeigen, was ich bisher erstellt habe. Der Live-Server verwendet Live-Reload und so etwas wie genannt Austausch des heißen Moduls. Dadurch werden Module auf einer Seite automatisch aktualisiert, ohne dass eine vollständige Seitenaktualisierung durchgeführt wird. Auf diese Weise kann ich den Fortschritt meines Builds in schnelleren Schritten sehen, während ich arbeite.

Sobald Parcel.js mit aktivem Server ausgeführt wird, werden alle Änderungen, die ich an einer Datei vornehme, bei jedem Speichern der Datei automatisch neu erstellt. Um dies in Aktion zu sehen, füge ich meinem Skript eine einfache Konsolenprotokollzeile hinzu. Dies löst die folgende Meldung in meinem Terminal aus:

$ parcel index.html
Server läuft unter http: // localhost: 1234
√ Eingebaut in 1.08s.
√ Eingebaut in 28ms.

Jede Zeile “Built …” stellt einen Build dar, der durch eine Änderung des Inhalts und des Speicherns ausgelöst wird.

Wenn ich meinen eigenen Server anstelle des integrierten Entwicklungsservers von Parcel verwenden möchte, kann ich den Befehl watch verwenden:

Paketüberwachung index.html

Ich erhalte das gleiche Ergebnis in meiner Terminalsitzung, wenn Parcel.js meine App erstellt und dann auf Änderungen wartet:

$ parcel watch index.html
√ Eingebaut in 855ms.

Der dist / Ordner

Wenn ich Parcel.js entweder im Überwachungsmodus oder über den integrierten Server gestartet habe und in den Ordner meines Projekts schaue, wird eine Ordner- und Dateistruktur wie folgt angezeigt:

index.html
package.json
js /
└───── index.js
dist /
└───── index.html
└───── js.00a46daa.js
└───── js.00a46daa.js.map

Beachten Sie den dist-Ordner, der automatisch erstellt wird. Hier befinden sich meine Produktionsdateien. Ich berühre keine dieser Dateien. Beachten Sie, dass mein Parcel Build meine index.js-Datei automatisch in eine Datei mit einer eindeutigen cachefreundlichen Version (mit einem überarbeiteten oder “überarbeiteten” Dateinamen) konvertiert hat. Es wurde auch eine Quellkartendatei hinzugefügt (Sie können Informationen zu Quellkarten lesen in diesem Beitrag).

Wenn ich in meiner index.html-Datei im dist-Ordner nachschaue, wird Folgendes angezeigt:

html>
<html>
<Kopf>
<Titel>Paket Demotitle>
Kopf>
<Körper>

<Skript src ="/js.00a46daa.js">Skript>
Körper>
html>

Beachten Sie, dass die dist-Version meiner index.html-Datei korrekt und bequem auf die dist-Version meiner .js-Datei verweist.

Wenn meine Website mehrere Dateien enthält, die auf dieselben Skripte verweisen (z. B. about.html, contact.html usw.), kann ich den folgenden Befehl verwenden:

Paketindex.html about.html contact.html

Dies teilt Parcel mit, dass ich mehrere Einstiegspunkte zum Erstellen verwenden möchte. Ich kann auch den folgenden Befehl verwenden, um Parcel.js anzuweisen, alle meine HTML-Dateien als Einstiegspunkte zu verwenden:

Paket * .html

Verwenden von Parcel.js mit Babel

Parcel.js bietet integrierte Unterstützung für verschiedene Code-Transpiler, einschließlich Babel, Das beliebte Tool zum Konvertieren von modernem JavaScript der nächsten Generation in äquivalenten Code, der von allen Browsern verstanden werden kann. Da Babel in Parcel.js integriert ist, benötigen Sie kein spezielles Plug-In, um es zu verwenden. Es funktioniert einfach. Schauen wir uns ein Beispiel an.

Ich werde der Datei index.js den folgenden Code hinzufügen:

Funktion getInfo (Name, Jahr = 2018, Farbe = ‘blau’) {
console.log (Name, Jahr, Farbe);
}}

getInfo (‘Chevy’, 1957, ‘Green’);
getInfo (‘Benz’, 1975);
getInfo (‘Honda’);

Dieser Code verwendet eine ES6-Funktion namens Standardparameter, was Sie speziell im Funktionskopf sehen können. Ältere Browser unterstützen keine Standardparameter für Funktionen. Um sicherzustellen, dass der Code keinen Fehler auslöst, muss Babel den Code in äquivalenten Code umwandeln, der in allen Browsern funktioniert. Sobald ich meine index.js-Datei gespeichert habe, erstellt Parcel.js meine App neu und erstellt anstelle des von mir geschriebenen ES6-Codes Folgendes:

Funktion getInfo (Name) {
var Jahr = Argumente.Länge > 1 && Argumente [1]! == undefiniert? Argumente [1]: 2018;
var color = argument.length > 2 && Argumente [2]! == undefiniert? Argumente [2]: ‘blau’;
console.log (Name, Jahr, Farbe);
}}

getInfo (‘Chevy’, 1957, ‘Green’);
getInfo (‘Benz’, 1975);
getInfo (‘Honda’);

Sie können Babels Online-Antwort auf verwenden Testen Sie dies aus.

Beachten Sie hier den wichtigsten Faktor: Ich habe nichts unternommen, um Babel zu installieren oder zu konfigurieren – es funktioniert einfach sofort als Teil des Standard-Setups von Parcel! Natürlich möchten Sie möglicherweise einige Konfigurationsoptionen hinzufügen, um Babel so zu ändern, dass es das tut, was Sie wollen. In diesem Fall können Sie eine .babelrc-Datei im Stammordner Ihres Projekts hinzufügen, einschließlich Ihrer Konfigurationseinstellungen. Sie können mehr darüber lesen Verwenden einer .babelrc-Datei auf der Parcel.js-Website.

Verwenden von Parcel.js mit Sass

Ähnlich wie bei Babel kompiliert Parcel meine SCSS (Sass) -Dateien standardmäßig automatisch zu gültigem CSS. Um dies zu demonstrieren, füge ich dem Stammverzeichnis meines Beispielprojekts einen Ordner mit dem Namen “css” hinzu. In diesem Ordner füge ich eine style.scss-Datei mit dem folgenden Sass-Code hinzu:

Körper {
Farbe schwarz;

.Modul {
Farbe Rot;
}}
}}

Ich verwende die Selector-Verschachtelungsfunktion von Sass. Ich werde dem Abschnitt meiner HTML-Dateien die folgende Zeile hinzufügen:

<link rel ="Stylesheet" href ="./css/style.scss">

Sobald alle meine Dateien gespeichert sind, erstellt Parcel in meinem dist / -Ordner einen neuen Build mit einer kompilierten CSS-Datei, die mein SCSS in Folgendes konvertiert hat:

Körper {
Farbe schwarz;
}}
Körpermodul {
Farbe Rot;
}}

Solange ich Sass global auf meinem System installiert habe, führt Parcel dies automatisch durch, ohne dass eine Konfiguration erforderlich ist. Wenn ich keine globale Installation von Sass habe, kein Problem. Ich kann einfach mein SCSS schreiben und dann Parcel starten. Parcel installiert Sass automatisch als projektspezifische Abhängigkeit. Sehr angenehm! Dies ist wiederum besonders nützlich, da keine Konfiguration erforderlich ist.

Und genau wie bei Babel kann ich mich für die Standardkonfigurationsoptionen von Sass entscheiden. Oder ich kann eine .sassrc-Datei im Stammverzeichnis meines Projekts erstellen und hinzufügen meine eigenen Konfigurationen.

Bündeln mehrerer Skripte mit Parcel

Bisher dienen die Beispiele, die ich Ihnen gezeigt habe, nur dazu, Sie mit Parcel vertraut zu machen, damit Sie eine grundlegende Vorstellung davon bekommen, wie es funktioniert. Wie bereits erwähnt, besteht die Stärke eines Bundlers in der Möglichkeit, mehrere Dateien automatisch zu einer einzigen Datei zu kombinieren. Dies hilft bei der Reduzierung von HTTP-Anfragen und der Verbesserung der Geschwindigkeit Ihrer Website oder App.

Alles, was ich bisher demonstriert habe, kann mit mehreren Skripten ausgeführt werden, die mithilfe der Modulfunktion von ES6 abgerufen werden. Dadurch kann ich Skripte modular erstellen und importieren. Dadurch ist mein Code einfach zu warten und es wird nur ein einziges gebündeltes Skript in der Produktion bereitgestellt.

Um dies zu demonstrieren, werde ich eine separate Datei namens module.js hinzufügen, die das folgende JavaScript enthält:

export let color = ‘grün’;

Exportfunktion add (n1, n2) {
return n1 + n2;
}}

Dies ist nur ein grundlegender Code zum Exportieren von zwei Objekten: einer Variablen und einer Funktion. In meiner Datei index.js werde ich diese Ressourcen mit dem folgenden Code importieren:

{color, add} aus ‘../js/module.js’ importieren;

console.log (Farbe); // // "Grün"
console.log (add (20, 40)); // 60

Auch dies ist nur die grundlegende Syntax des ES6-Moduls. Ich werde hier nicht näher darauf eingehen, wie dies funktioniert. Das Schöne daran ist, dass ich in meiner HTML-Datei nicht angeben musste, dass ich ein Modul verwendet habe. Normalerweise sieht mein Skript-Tag so aus, wobei das type-Attribut auf module gesetzt ist:

<Skript src ="./js/index.js" Typ ="Modul">Skript>

Dies wird jedoch nicht benötigt. Parcel erkennt das zu importierende Modul und bündelt meine beiden Skripte in einer einzigen leistungsfreundlichen Ressource. Dies geschieht ohne spezielle Konfiguration oder Plugins. Und genau wie in den vorherigen Beispielen wird der Code mithilfe von Babel in ES5-äquivalenten Code umgewandelt, der mir die größte Browserunterstützung bietet.

Code-Aufteilung mit Parcel.js

Eine weitere Funktion in Parcel, die ohne Konfiguration funktioniert, ist Code-Aufteilung. In einigen Fällen möchte ich, dass alle meine Module auf alle meine Seiten geladen werden. In anderen Fällen möchte ich möglicherweise nur bestimmte Module auf bestimmten Seiten in bestimmten Kontexten laden. Dies ermöglicht mir die Code-Aufteilung.

Ich habe bereits erwähnt, dass mein Beispielprojekt drei Seiten umfasst: index.html, about.html und contact.html. Angenommen, ich möchte auf allen drei Seiten dasselbe JavaScript-Bundle ausführen, aber auf der Seite about.html habe ich eine Schaltfläche, die etwas Bestimmtes auslöst. Ich möchte jedoch, dass dieser Code nur geladen wird, wenn diese Taste gedrückt wird.

So könnte dieser Code mithilfe der Code-Aufteilungsfunktion aussehen:

if (document.querySelector (‘. about’)) {
document.querySelector (‘. about’). addEventListener (‘click’, () => {
import (‘../ js / about.js’). then (
document.body.innerHTML + = ‘Über Seite aktualisiert’;
);
});
}}

Beachten Sie, dass dies eine neue JavaScript-Funktion enthält, dynamische Importe mit der Funktion import (). Auf diese Weise kann ich den gewünschten Code in einer bestimmten Instanz dynamisch laden. In diesem Fall mache ich das, wenn auf der Info-Seite eine Schaltfläche gedrückt wird. Die Funktion import () gibt ein Versprechen zurück, sodass ich in der .then () -Klausel, die nach dem Laden des importierten Skripts ausgelöst wird, alles tun kann, was ich will. Das Skript about.js wird bei Bedarf geladen und dieser Code wird von Babel in browserübergreifendes ES5 übertragen, um sicherzustellen, dass er überall funktioniert. Wenn mein Bundle erstellt wird, wird der Teil about.js in einer eigenen Datei im Ordner dist / abgelegt, damit diese Datei bei Bedarf geladen werden kann.

Wie andere Funktionen, die ich besprochen habe, funktioniert die Funktion import () in Parcel ohne Konfiguration.

Die Produktion wird mit Parcel.js erstellt

Bis jetzt habe ich alle meine Paket-Builds im laufenden Betrieb mithilfe des integrierten Pakets erstellt, der im Lieferumfang von Parcel enthalten ist und das Live-Reload umfasst. Jedes Mal, wenn ich mein Projekt speichere, wird mein Bundle erstellt. Der Code wurde jedoch immer für die Weiterentwicklung gebündelt. Auf diese Weise kann ich die Quelle nach Bedarf anzeigen oder überprüfen, um ein Debugging durchzuführen.

Sobald mein Projekt abgeschlossen und bereit ist, auf einen Live-Server übertragen zu werden, kann ich Parcel daran hindern, mein Projekt anzusehen. STRG-C im Terminal erledigt dies auf vielen Plattformen. Dann führe ich den folgenden Befehl aus, um Parcel anzuweisen, einen endgültigen Build zu erstellen:

Paket erstellen index.html about.html contact.html

In diesem Fall baue ich aus allen drei meiner Eingabedateien. Sobald dies erledigt ist, wartet Parcel nicht mehr auf Änderungen. Das endgültige Bundle wird erstellt und fertig. Zusätzlich zur Fertigstellung des Builds wird mein Code für die Produktion durch Parcel vorbereitet. HTML, CSS und JavaScript werden alle minimiert, um möglichst kleine Dateien für eine optimierte Leistung zu erstellen.

Nachteile bei der Verwendung von Parcel?

Paket sollte auf jeden Fall die erste Wahl für diejenigen sein, die wenig oder keine Erfahrung mit Build-Tools haben. Aber in meiner eigenen Forschung habe ich einige Dinge gefunden, die ich erwähnen kann und die in Zukunft verbessert werden sollten.

Zunächst werden Sie feststellen, dass Parcel Ihre gebündelten Skripte und Stylesheets immer im selben Verzeichnis wie die HTML-Dateien des Einstiegspunkts ablegt. Dies geschieht auch dann, wenn Sie Ihre CSS- und JavaScript-Dateien in separaten Ordnern haben. Da es sich um Produktionsdateien handelt, spielt dies möglicherweise keine Rolle. Aber es ist etwas zu beachten. Die gute Nachricht ist dies scheint korrigiert worden zu sein in der kommenden Paketversion 2 (noch in Alpha). Es sollte also eine Möglichkeit geben, dieses Verhalten zu überschreiben, wenn diese Version von Parcel stabil ist (die aktuelle stabile Version ist 1.12.4)..

Ein weiterer Nachteil ist, dass ich festgestellt habe, dass die Paketdokumentation ziemlich minimal ist, wenn es um Informationen zum Anpassen der Konfigurationsoptionen für die verschiedenen Funktionen geht. Es ist wahr, dass einer der großen Vorteile von Parcel darin besteht, wie gut es sofort funktioniert. Ich denke jedoch, dass eine ausführlichere Dokumentation zum Anpassen hilfreich wäre. Wie deaktiviere ich beispielsweise die HTML-Minimierung in meinen Builds, während die CSS- und JavaScript-Minimierung beibehalten wird? Ich sehe keine Beschreibung in den Dokumenten. Als ich die geschlossenen Probleme auf GitHub durchgesehen habe, gibt es eine Problemumgehung (dachte, es ist nicht sehr praktisch).

Fazit

Eine letzte Sache, die ich erwähnen möchte, ist ein Tool namens App erstellen, Hiermit können Sie automatisch Konfigurationsdateien für Parcel erstellen. Hier können Sie Ihre JavaScript-Bibliothek, Ihren Transpiler, Ihren Linter usw. auswählen. Diese werden Ihrer Datei package.json hinzugefügt und können initialisiert werden.

App in Parcel.js erstellen

Das war’s für dieses Paket-Tutorial für Anfänger. Ich hoffe, dass Sie diese Informationen verwenden können, um schnell mit Parcel zu arbeiten und sie für zukünftige Projekte zu verwenden. Und wenn Sie mit der App-Bündelung noch nicht vertraut sind oder sie noch nie in einem Projekt ausprobiert haben, wird Sie diese Einführung möglicherweise dazu inspirieren, Parcel auszuprobieren.

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Layout und Präsentation von Karol K..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector