Warum Parcel mein bevorzugter Bundler für die Entwicklung geworden ist

Heute sprechen wir über Anwendungs-Bundler – Tools, die uns Entwicklern das Leben erleichtern. Im Kern nehmen Bundler Ihren Code aus mehreren Dateien und fassen alles logisch in einer oder mehreren Dateien zusammen, die kompiliert und für die Verwendung im Browser bereit sind. Darüber hinaus können Sie durch verschiedene Plugins und Loader den Code verkleinern, andere Arten von Assets (wie CSS und Bilder) bündeln, Präprozessoren verwenden, Code aufteilen usw. Sie verwalten den Entwicklungsworkflow.

Es gibt viele Bundler da draußen, wie z. B. Browserify und webpack. Während dies großartige Optionen sind, finde ich persönlich, dass sie schwierig einzurichten sind. Wo fängt man an? Das gilt insbesondere für Anfänger, bei denen eine „Konfigurationsdatei“ etwas einschüchternd sein kann.

Deshalb greife ich gerne zu Parcel. Ich bin zufällig darauf gestoßen, als ich ein Tutorial auf YouTube gesehen habe. Der Sprecher sprach über Tipps für schnellere Entwicklung und verließ sich stark auf Parcel als Teil seines Workflows. Ich beschloss, es selbst auszuprobieren.

Was macht Parcel besonders?

Das, was ich an diesem Bundler am meisten liebe: Er benötigt keine Konfiguration. Buchstäblich keine überhaupt! Vergleichen Sie das mit webpack, wo die Konfiguration über mehrere Dateien verstreut sein kann, die alle Unmengen an Code enthalten… den Sie vielleicht aus den Konfigurationen anderer Leute übernommen haben oder von anderen Projekten geerbt haben. Sicher, die Konfiguration ist nur so komplex, wie Sie sie machen, aber selbst ein bescheidener Workflow erfordert eine Reihe von Plugins und Optionen.

Wir alle nutzen verschiedene Werkzeuge, um unsere Arbeit zu vereinfachen. Es gibt Dinge wie Präprozessoren, Postprozessoren, Compiler, Transpiler usw. Die Einrichtung dauert Zeit, oft ziemlich viel davon. Möchten Sie diese Zeit nicht lieber mit der Entwicklung verbringen?

Deshalb scheint Parcel eine gute Lösung zu sein. Möchten Sie Ihre Stile in SCSS oder LESS schreiben? Tun Sie es! Möchten Sie die neueste JavaScript-Syntax verwenden? Inbegriffen. Benötigen Sie einen Server für die Entwicklung? Haben Sie ihn. Das ist kaum die Oberfläche der langen Liste anderer unterstützter Funktionen.

Parcel ermöglicht es Ihnen, einfach mit der Entwicklung zu beginnen. Das ist der größte Vorteil der Verwendung als Bundler – zusammen mit seiner blitzschnellen Kompilierung, die Multi-Core-Verarbeitung nutzt, während andere Bundler, einschließlich webpack, mit komplexen und schweren Transformationen arbeiten.

Wo die Verwendung von Parcel sinnvoll ist

Parcel ist, wie jedes Werkzeug, kein Allheilmittel, das als Einheitslösung für alles konzipiert ist. Es hat Anwendungsfälle, in denen es am besten zur Geltung kommt.

Ich habe bereits erwähnt, wie schnell ein Projekt gestartet werden kann. Das macht es ideal für die Arbeit mit engen Fristen und Prototypen, bei denen die Zeit kostbar ist und das Ziel darin besteht, so schnell wie möglich in den Browser zu gelangen.

Das soll nicht heißen, dass es nicht in der Lage ist, komplexe Anwendungen oder Projekte zu bewältigen, an denen viele Entwickler arbeiten. Es ist durchaus dazu in der Lage. Ich erkenne jedoch an, dass solche Projekte von einem manuell erstellten Workflow sehr profitieren können.

Es ist ein bisschen wie der Unterschied zwischen einem Auto mit Automatikgetriebe und einem mit Schaltgetriebe. Manchmal braucht man zusätzliche Kontrolle und manchmal nicht.

Ich arbeite an einer kommerziellen Multi-Page-Website mit viel JavaScript im Hintergrund, und Parcel funktioniert für mich sehr gut. Es stellt meinen Server bereit, kompiliert mein Sass zu CSS, fügt bei Bedarf Vendor-Präfixe hinzu und ermöglicht mir die Verwendung von Import und Export in meinen JavaScript-Dateien „out of the box“ ohne Konfiguration. All dies hat es mir ermöglicht, mein Projekt mit Leichtigkeit zum Laufen zu bringen.

Lassen Sie uns gemeinsam eine einfache Website mit Parcel erstellen

Lassen Sie uns Parcel auf die Probe stellen, um zu sehen, wie relativ einfach es ist, etwas damit zu erstellen.

Wir werden eine einfache Seite erstellen, die Sass und ein wenig JavaScript verwendet. Wir rufen den aktuellen Wochentag und ein zufälliges Bild von Unsplash Source ab.

Die Grundstruktur

Es gibt kein Gerüst, das wir verwenden müssen, oder kein Framework, das wir zur Initialisierung unseres Projekts benötigen. Stattdessen erstellen wir drei Dateien, die Ihnen sehr vertraut vorkommen sollten: index.html, style.scss und index.js. Sie können dies manuell oder im Terminal einrichten.

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

Fügen wir unserer HTML-Datei etwas Boilerplate-Markup und die grundlegende Struktur 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>and the image of the day:</h2>
    <img src="https://source.unsplash.com/random/600x400" alt="unsplash random image">
</div>
<script src="index.js"></script>
</body>
</html>

Sie haben vielleicht bemerkt, dass ich eine Web-Schriftart (Lato) von Google einbinde, was völlig optional ist. Ansonsten verknüpfen wir nur die CSS- und JavaScript-Dateien und fügen die grundlegende HTML-Struktur ein, die den Wochentag und einen Link von Unsplash anzeigt, der ein zufälliges Bild liefert. Das ist alles, was wir für unsere Basislinie wirklich brauchen.

Staunen Sie über die schnelle Einrichtung von Parcel!

Lassen Sie uns die Anwendung mit Parcel als Bundler ausführen, bevor wir uns mit Styling und Skripten befassen. Die Installation von Parcel ist wie bei jeder Sache.

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

Erstellen wir auch eine package.json-Datei, falls wir irgendwelche Entwicklungsabhängigkeiten benötigen. Hier wird Parcel auch alles einbinden, was es zum sofortigen Funktionieren benötigt.

npm init -y
# or
yarn init -y

Das ist alles! Keine weitere Konfiguration! Wir müssen Parcel nur mitteilen, welche Datei der Einstiegspunkt für das Projekt ist, damit es weiß, wohin sein Server zeigen soll. Das wird unsere HTML-Datei sein.

parcel index.html

Wenn wir die Konsole öffnen, sehen wir etwas Ähnliches, das anzeigt, dass der Server bereits läuft.

Server running at https://:1234

Der Server von Parcel unterstützt Hot Reloading und baut die App neu, sobald Änderungen gespeichert werden.

Wenn wir nun zu unserem Projektordner zurückkehren, sehen wir zusätzliche Elemente, die Parcel für uns erstellt hat.

Wichtig für uns ist hier der dist-Ordner, der unseren gesamten kompilierten Code enthält, einschließlich Source Maps für CSS und JavaScript.

Jetzt müssen wir nur noch bauen!

Gehen wir zu style.scss und sehen wir, wie Parcel Sass handhabt. Ich habe Variablen erstellt, um einige Farben und eine Breite für den Container zu speichern, der unseren Inhalt enthält.

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

Jetzt etwas Styling, einschließlich einiger verschachtelter Regelsätze. Sie können natürlich Ihr eigenes Ding machen, aber hier ist, was ich zu Demozwecken zusammengestellt habe.

*, *::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 wir speichern, wird die Magie von Parcel ausgelöst und alles wird für uns im Browser kompiliert und neu geladen. Kein Befehl erforderlich, da es die Dateien bereits auf Änderungen überwacht.

Das ist es, was wir bisher haben.

Das Einzige, was noch übrig ist, ist die Anzeige des aktuellen Wochentags. Wir werden Imports und Exports verwenden, damit wir sehen können, wie Parcel uns erlaubt, modernes JavaScript zu verwenden.

Lassen Sie uns eine Datei namens today.js erstellen und eine Funktion einbinden, die den aktuellen Wochentag aus einem Array von Tagen meldet.

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

💡 Es ist erwähnenswert, dass die Funktion getDay Sonntag als ersten Tag der Woche zurückgibt.

Beachten Sie, dass wir die Funktion getDay exportieren. Gehen wir in unsere Datei index.js und importieren sie dort, damit sie beim Kompilieren einbezogen wird.

import { getDay } from './today';

Wir können Dateien importieren/exportieren, da Parcel die ES6-Modulsyntax sofort unterstützt – wieder keine Konfiguration erforderlich!

Das Einzige, was noch übrig ist, ist die Auswahl des <span>-Elements und die Übergabe des Wertes der getDay-Funktion daran.

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

Sehen wir uns das Endergebnis an.

Das Letzte ist, für die Produktion zu bauen!

Wir haben die App erstellt, aber wir möchten sie irgendwo hosten – sei es auf Ihrem persönlichen Server oder auf einer Zero-Configuration-Bereitstellung wie Surge oder Now – und wir wollen kompilierten und minifizierten Code ausliefern.

Hier ist der einzige Befehl, den wir benötigen.

parcel build index.js

Dies liefert uns alle für die Produktion bereiten Assets für die App. Sie können mehr über den Produktmodus von Parcel erfahren, um einige Tipps und Tricks zu erhalten, um das Beste aus Ihrer Umgebung herauszuholen.

---

Ich habe es mehrmals gesagt und werde es wiederholen: Parcel ist ein großartiges Werkzeug. Es bündelt, kompiliert, liefert, verarbeitet vor und nach, minifiziert und verkleinert und mehr. Wir haben uns vielleicht ein recht einfaches Beispiel angesehen, aber hoffentlich haben Sie jetzt ein gutes Gefühl dafür, was Parcel bietet und wie Sie es in Ihren eigenen Projekten einsetzen könnten.

Mich interessiert, ob Sie Parcel bereits nutzen und wenn ja, wie Sie es verwendet haben. Haben Sie festgestellt, dass es für manche Dinge besser geeignet ist als für andere? Haben Sie einen genialen Trick entdeckt, der es noch leistungsfähiger macht? Lassen Sie es mich in den Kommentaren wissen!