Paket ist mein Lieblingsprojektbauer

Heute werden wir über Project Builder (Bundler) sprechen, Tools, die Entwicklern das Leben erleichtern. Das Wesentliche an der Arbeit von Bundlern ist, dass sie den in vielen Dateien enthaltenen JavaScript-Code in eine oder mehrere Dateien packen und sie auf bestimmte Weise für die Arbeit in Browsern bestellen und vorbereiten. Darüber hinaus kann dank verschiedener Plug-Ins (Plug-Ins) und Loader der Code minimiert und zusätzlich zum Code andere Ressourcen (wie CSS-Dateien und Bilder) gepackt werden. Mit Bundlern können Sie Präprozessoren verwenden. Sie können den Code in Fragmente aufteilen, die bei Bedarf geladen werden. Ihre Fähigkeiten sind jedoch nicht darauf beschränkt. In der Tat sprechen wir über die Tatsache, dass sie helfen, den Entwicklungsprozess zu organisieren.



Es gibt viele Bündler. Zum Beispiel - Browserify und Webpack . Obwohl diese Projektentwickler großartige Tools sind, fand ich sie persönlich schwierig einzurichten. Wo soll ich mit dem Setup beginnen? Diese Frage ist besonders relevant für Anfänger, für diejenigen, die möglicherweise Angst vor einer „Konfigurationsdatei“ haben.

Deshalb verwende ich normalerweise den Paket- Projekt- Builder . Ich bin zufällig auf diesen Bundler gestoßen, als ich mir ein Trainingsvideo auf YouTube angesehen habe. Es gab Tipps, um die Entwicklung zu beschleunigen. Die in diesem Video gezeigte Arbeitsumgebung war stark an Parcel gebunden. Danach habe ich beschlossen, diesen Bundler auszuprobieren.

Merkmale des Pakets

Was mir an Parcel am besten gefällt, ist, dass überhaupt keine Konfiguration erforderlich ist. Das ist richtig: Sie müssen es nicht konfigurieren. In dieser Hinsicht übertrifft Parcel das Webpack , bei dem die Einstellungen auf mehrere Dateien verteilt werden können und ganze „Codeblätter“ darstellen. Der Entwickler, der das Webpack einrichtet, hat möglicherweise etwas aus den Konfigurationsdateien anderer Programmierer entnommen. Es ist möglich, dass die Einstellungen einfach vollständig aus anderen Projekten kopiert werden. Es ist klar, dass die Komplexität der Konfiguration vom Entwickler abhängt. Selbst wenn Sie ein Webpack für ein kleines Projekt einrichten, müssen Sie bestimmte Plug-Ins verwenden und bestimmte Optionen installieren.

Deshalb scheint mir die Nutzung von Parcel ein Coup zu sein. Wenn ein Entwickler beispielsweise plant, sein Projekt mit SCSS oder LESS zu stilisieren, kann er ohne unnötige Bewegungen einfach den entsprechenden Code schreiben. Möchten Sie die neuesten JavaScript-Funktionen nutzen? In diesem Fall können Sie mit diesen Funktionen Code schreiben, ohne an irgendetwas zu denken. Benötigen Sie einen Server für die Entwicklung? Derjenige, der Parcel verwendet, hat einen solchen Server. Tatsächlich haben wir hier kaum die Spitze des Eisbergs der enormen Fähigkeiten von Parcel berührt.

Mit Parcel kann der Programmierer, ohne Zeit mit sekundären Dingen zu verschwenden, einfach die Arbeit am Projekt aufnehmen und beginnen. Dies ist der Hauptvorteil der Verwendung als Bündler. Darüber hinaus verarbeitet Parcel Dateien und erstellt Projekte sehr schnell mithilfe der Funktionen von Multi-Core-Prozessoren, während andere Bundler, einschließlich Webpack, langsamere und komplexere Codetransformationen durchführen.

Nutzungsumfang des Pakets

Paket ist wie jedes andere Werkzeug kein universelles Werkzeug, das immer und überall gleich gut anwendbar ist. Es gibt jedoch Situationen, in denen Parcel besonders erfolgreich ist.

Ich habe bereits darüber gesprochen, wie schnell Sie mit Parcel ein funktionierendes Projekt eingeben können. Dank dessen ist es ideal für die Arbeit in engen Zeitrahmen und für die Erstellung von Prototypen. Wir sprechen über Situationen, in denen Zeit teuer ist und das Ziel von Entwicklern darin besteht, so schnell wie möglich eine funktionierende Anwendung zu erstellen.

Dies bedeutet nicht, dass Parcel nicht für komplexe Anwendungen oder für Projekte geeignet ist, an denen große Teams von Programmierern teilnehmen. Das Paket funktioniert unter solchen Bedingungen gut. Ich erkannte jedoch, dass Großprojekte von der manuellen Anpassung von Workflows profitieren können.

Um einen Bündler, der keine Einstellungen benötigt, mit einem zu konfigurierenden Bündler zu vergleichen, müssen Sie Autos mit einem automatischen und einem manuellen Getriebe vergleichen. Manchmal muss der Fahrer möglicherweise mehr Details steuern, manchmal weniger.

Ich habe an einer mehrseitigen Site gearbeitet, in deren Tiefe sich viel JavaScript-Code befand. Parcel hat sich in diesem Projekt gut geschlagen. Er gab mir einen Server, er kompilierte Sass in CSS, fügte dem Code bei Bedarf Präfixe von Browserherstellern hinzu und erlaubte ohne Einstellungen die Verwendung von Export- und Importbefehlen in JavaScript-Dateien. All dies hat meine Arbeit an dem Projekt sehr erleichtert.

Erstellen einer einfachen Website mit Parcel

Lassen Sie uns eine Paket-Probefahrt arrangieren. Dadurch können wir sehen, dass das Erstellen von etwas mit diesem Bundler relativ einfach ist. Hier ist die Seite, auf der wir arbeiten werden.


Pilotprojekt Seite

Wir werden eine einfache Site erstellen, die Sass und ein bisschen JavaScript verwendet. Wir zeigen Informationen über den aktuellen Wochentag und ein zufälliges Bild, das von Unsplash Source heruntergeladen wurde, auf der Website-Seite an.

▍Grundstruktur des Projekts

Das Projekt, für das Parcel verwendet werden soll, benötigt keine spezielle Struktur von Dateien und Ordnern. Es muss kein bestimmtes Framework verwendet werden. Die Grundstruktur des Projekts besteht aus drei Dateien, deren Namen für sich sprechen. Dies sind index.html , style.scss und index.js . Sie können sie nach Ihren Wünschen erstellen. Verwenden Sie beispielsweise die Befehlszeile:

 mkdir simple-site cd simple-site touch index.html && touch style.scss && touch index.js 

Fügen Sie der Datei index.html , auf der die Funktionalität des Projekts basiert, einen kleinen Vorlagencode und ein Markup hinzu:

 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">  <link rel="stylesheet" href="style.scss">  <title>Parcel Tutorial</title> </head> <body>  <div class="container">    <h1>Today is:</h1>    <span class="today"></span>    <h2><font color="#3AC1EF">and the image of the day:</font></h2>    <img align="center" src="https://source.unsplash.com/random/600x400" alt="unsplash random image"> </div> <script src="index.js"></script> </body> </html> 

Möglicherweise haben Sie bemerkt, dass ich hier die Webschrift ( Lato ) von Google Fonts herunterlade. Die Verwendung von herunterladbaren Schriftarten ist freiwillig. Hier lohnt es sich, auf die Verbindung von CSS- und JavaScript-Dateien sowie auf den HTML-Code des Dokumententexts zu achten, der einen Ort für die Ausgabe von Informationen über den Wochentag und einen Ort für die Ausgabe eines zufälligen Bildes aus Unsplash bietet. Tatsächlich ist mit dieser Arbeit an der Grundstruktur des Projekts abgeschlossen.

▍Wunder der schnellen Vorbereitung des Pakets auf die Arbeit

Bevor wir mit dem Styling und Scripting fortfahren, versuchen wir, unser Projekt mit Parcel auszuführen. Die Installation von Parcel ist nichts Ungewöhnliches:

 npm install -g parcel-bundler #  yarn global add parcel-bundler 

Initialisieren Sie nun das Projekt mit npm oder Garn, was zur Erstellung der Datei package.json :

 npm init -y #  yarn init -y 

Das ist alles! Es müssen keine weiteren Einstellungen vorgenommen werden. Wir müssen Parcel nur noch mitteilen, welche Datei der Einstiegspunkt des Projekts ist. Auf diese Weise kann der Bundler herausfinden, was sein Server den Clients geben muss.

In unserem Fall wäre eine solche Datei index.html :

 parcel index.html 

Nach dem erfolgreichen Start des Servers wird in der Konsole Folgendes angezeigt:

 Server running at http://localhost:1234 √ Built in 13ms. 

Der Paketserver unterstützt einen Hotboot. Der Bundler erstellt die Anwendung jedes Mal neu, wenn die an den Projektdateien vorgenommenen Änderungen gespeichert werden.

Kehren wir zum Projektordner zurück. Hier sehen Sie die neuen Ordner und Dateien, die vom Bundler erstellt wurden.


Neue Ordner und Dateien, die vom Bundler erstellt wurden

Wir interessieren uns besonders für den Ordner dist . Es enthält den gesamten kompilierten Code, einschließlich Codekarten für CSS und JavaScript.

▍ Fortsetzung der Arbeit am Projekt

Gehen wir style.scss Datei style.scss und style.scss , wie Parcel den Sass-Code verarbeitet. Ich habe hier verschiedene Variablen erstellt, mit denen die Farben und die Breite des Containers gespeichert werden, in dem sich der Inhalt der Seite befindet:

 $container-size: 768px; $bg: #000; $text: #fff; $primary-yellow: #f9f929; 

Fügen Sie nun in derselben Datei Stilbeschreibungen hinzu. Hier können Sie erstellen, was Sie möchten. Zum Beispiel habe ich das getan:

 *, *::after, *::before {  box-sizing: border-box; } body {  background: $bg;  color: $text;  font-family: 'Lato', sans-serif;  margin: 0;  padding: 0; } .container {  margin: 0 auto;  max-width: $container-size;  text-align: center;  h1 {    display: inline-block;    font-size: 36px;  }  span {    color: $primary-yellow;    font-size: 36px;    margin-left: 10px;  } } 

Sobald diese Datei gespeichert ist, macht sich Parcel an die Arbeit, kompiliert alles und lädt die Seite im Browser neu. Wir müssen nichts anderes tun, als die Datei zu speichern. Parcel überwacht standardmäßig Dateiänderungen.

So sieht die Seite nach dem Styling aus.


Stilisierte Seite

Es bleibt nur noch der Name des aktuellen Wochentags anzuzeigen. Bei der Lösung dieses Problems werden wir die Import- und Exportteams einsetzen . Dadurch wird die Fähigkeit von Parcel getestet, mit modernen JavaScript-Mechanismen zu arbeiten.

Erstellen Sie eine Datei today.js und exportieren Sie daraus eine Funktion, die mithilfe eines Arrays mit den Namen der Wochentage den Namen des aktuellen Tages zurückgibt:

 export function getDay() {  const today = new Date();  const daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];  return daysArr[today.getDay()]; } 

Beachten Sie, dass die Funktion getDay ersten Tag der Woche zählt.

Wir haben die Funktion getDay aus getDay exportiert. Gehen index.js Datei index.js und importieren diese Funktion aus der Datei today.js in sie. Dadurch wird die Datei today.js während der Montage des Projekts verarbeitet.

 import { getDay } from './today'; 

Parcel unterstützt ohne zusätzliche Einstellungen die Syntax von ES6-Modulen , sodass wir die Import- und Exportbefehle in den JS-Dateien verwenden können.

Jetzt müssen wir nur noch das entsprechende <span> -Element auswählen und den von der Funktion getDay zurückgegebenen Wert getDay . Fügen Sie index.html den folgenden Code hinzu:

 const day = document.querySelector('.today'); day.innerHTML = getDay(); 

Nach dem Speichern der Datei wird das Projekt neu erstellt und die Seite im Browser geändert.


Projekt abgeschlossen

▍Erstellung eines Projekts für die Produktion

Wir haben die Anwendung erstellt und möchten sie jetzt irgendwo ablegen. Es kann unser eigener Server sein oder so etwas wie Surge oder Now , was das Veröffentlichen von Webprojekten so einfach wie möglich macht. Gleichzeitig muss der Projektcode kompiliert und minimiert werden.

Um das Projekt in eine für die Veröffentlichung geeignete Form zu bringen, benötigen wir nur einen einzigen Befehl:

 parcel build index.html 

Nach dem Ausführen dieses Befehls erhält die Konsole etwas Ähnliches wie in der folgenden Abbildung.


Projektmontage

Jetzt stehen uns die Ressourcen der Anwendung zur Verfügung, um sie in der Produktion bereitzustellen. Hier können Sie die Details darüber lesen, wie Parcel Produktionsversionen von Projekten sammelt, und einige Tipps finden, die die Effizienz der Arbeit mit diesem Bundler verbessern.

Zusammenfassung

Ich habe das schon mehrmals gesagt, aber ich werde es noch einmal wiederholen: Paket ist ein großartiges Werkzeug. Sie können Projekte sammeln, Code kompilieren, dem Entwicklungsserver einen Programmierer zur Verfügung stellen, Ressourcen vor- und nachbearbeiten, den Code minimieren. Und seine Fähigkeiten sind nicht darauf beschränkt. Hier haben wir uns wahrscheinlich ein äußerst einfaches Beispiel angesehen, aber ich hoffe, dass Sie dadurch die Möglichkeiten von Parcel kennenlernen und lernen konnten, wie Sie diesen Bundler in Ihren Projekten verwenden.

Liebe Leser! Welchen Bundler verwenden Sie?