Möglicherweise sind Sie bereits mit webpack für die Asset-Verwaltung in Projekten vertraut. Es gibt jedoch ein weiteres cooles Tool namens Parcel, das mit webpack vergleichbar ist und bei der unkomplizierten Asset-Bündelung hilft. Wo Parcel wirklich glänzt, ist, dass es keine Konfiguration erfordert, um einsatzbereit zu sein, während andere Bundler oft viel Code erfordern, nur um zu starten. Außerdem ist Parcel extrem schnell, wenn es ausgeführt wird, da es Multicore-Verarbeitung nutzt, während andere auf komplexen und schweren Transformationen basieren.
Zusammenfassend betrachten wir eine Reihe von Funktionen und Vorteilen
- Code-Splitting mit dynamischen Importen
- Asset-Verarbeitung für jede Art von Datei, aber natürlich für HTML, CSS und JavaScript
- Hot Module Replacement zum Aktualisieren von Elementen ohne Seitenaktualisierung während der Entwicklung
- Fehler im Code werden beim Protokollieren hervorgehoben, wodurch sie leicht zu finden und zu beheben sind
- Umgebungsvariablen zur einfachen Unterscheidung zwischen lokaler und Produktionsentwicklung
- Ein "Produktionsmodus", der den Build beschleunigt, indem unnötige Build-Schritte vermieden werden
Hoffentlich sehen Sie jetzt gute Gründe, Parcel zu verwenden. Das soll nicht heißen, dass es zu 100 % oder immer verwendet werden sollte, sondern dass es gute Fälle gibt, in denen es sehr sinnvoll ist.
In diesem Artikel werden wir sehen, wie man ein React-Projekt mit Parcel einrichtet. Während wir dabei sind, werden wir auch eine Alternative zu Create React App prüfen, die wir mit Parcel für die Entwicklung von React-Anwendungen verwenden können. Das Ziel hier ist zu zeigen, dass es andere Möglichkeiten gibt, in React zu arbeiten, wobei Parcel als Beispiel dient.
Ein neues Projekt einrichten
OK, das Erste, was wir brauchen, ist ein Projektordner, um lokal zu arbeiten. Wir können einen neuen Ordner erstellen und ihn direkt von der Befehlszeile aus ansteuern
mkdir csstricks-react-parcel && $_Als Nächstes holen wir uns unsere obligatorische package.json-Datei hinein. Wir können entweder npm oder Yarn verwenden, indem wir einen der folgenden Befehle ausführen
## Using npm
npm init -y
## Using Yarn, which we'll continue with throughout the article
yarn init -yDies gibt uns eine package.json-Datei in unserem Projektordner mit den Standardkonfigurationen, die wir zum lokalen Arbeiten benötigen. Apropos, das Parcel-Paket kann global installiert werden, aber für dieses Tutorial werden wir es lokal als Entwicklungsabhängigkeit installieren.
Wir benötigen Babel, wenn wir mit React arbeiten, also legen wir los
yarn add parcel-bundler babel-preset-env babel-preset-react --devAls Nächstes installieren wir React und ReactDOM…
yarn add react react-dom…dann erstellen wir eine babel.rc-Datei und fügen dies hinzu
{
"presets": ["env", "react"]
}Als Nächstes erstellen wir unsere Basis-App-Komponente in einer neuen index.js-Datei. Hier ist eine schnelle, die einfach eine "Hallo"-Überschrift zurückgibt
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<React.Fragment>
<h2>Hello!</h2>
</React.Fragment>
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);Wir benötigen eine HTML-Datei, in der die App-Komponente gemountet wird. Erstellen wir also eine index.html-Datei im src-Verzeichnis. Auch hier ist eine ziemlich einfache Hülle, von der aus man arbeiten kann
<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">
<title>Parcel React Example</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>Wir werden das zuvor installierte Parcel-Paket verwenden. Damit das funktioniert, müssen wir das start-Skript in der package.json-Datei bearbeiten, sodass es so aussieht
"scripts": {
"start": "NODE_ENV=development parcel src/index.html --open"
}Schließlich kehren wir zur Befehlszeile zurück und führen yarn start aus. Die Anwendung sollte starten und ein frisches Browserfenster öffnen, das auf https://:1234/ zeigt.
Mit Styles arbeiten
Parcel wird standardmäßig mit PostCSS geliefert, aber wenn wir etwas anderes verwenden wollen, können wir das natürlich tun. Zum Beispiel können wir node-sass installieren, um Sass im Projekt zu verwenden
yarn add --dev node-sass autoprefixerWir haben bereits autoprefixer, da es sich um ein PostCSS-Plugin handelt, also können wir das im postcss-Block von package.json konfigurieren
// ...
"postcss": {
"modules": false,
"plugins": {
"autoprefixer": {
"browsers": [">1%", "last 4 versions", "Firefox ESR", "not ie < 9"],
"flexbox": "no-2009"
}
}
}Produktionsumgebung einrichten
Wir möchten sicherstellen, dass unser Code und unsere Assets für die Produktionsnutzung kompiliert werden. Stellen wir also sicher, dass wir unserem Build-Prozess mitteilen, wohin diese gehen sollen. Wieder in package-json
"scripts": {
"start": "NODE_ENV=development parcel src/index.html --open",
"build": "NODE_ENV=production parcel build dist/index.html --public-url ./"
}Das Ausführen von yarn run build kompiliert nun die Anwendung für die Produktion und gibt sie im dist-Ordner aus. Es gibt einige zusätzliche Optionen, die wir hinzufügen können, um die Dinge bei Bedarf etwas weiter zu verfeinern
--out-dir verzeichnisname: Dies dient zur Verwendung eines anderen Verzeichnisses für die Produktionsdateien anstelle des Standard-dist-Verzeichnisses.--no-minify: Minifizierung ist standardmäßig aktiviert, aber wir können sie mit diesem Befehl deaktivieren.--no-cache: Dies ermöglicht uns, den Dateisystem-Cache zu deaktivieren.
💩 CRAP (Create React App Parcel)
Create React App Parcel (CRAP) ist ein Paket, das von Shawn Swyz Wang entwickelt wurde, um schnell React-Anwendungen für Parcel einzurichten. Laut Dokumentation können wir jede Anwendung mit folgendem Befehl bootstrappen
npx create-react-app-parcel my-appDies erstellt die Dateien und Verzeichnisse, die wir zum Arbeiten benötigen. Dann können wir in den Anwendungsordner wechseln und den Server starten.
cd my-app
yarn startParcel ist einsatzbereit!
Es lohnt sich, Parcel in Ihrer nächsten React-Anwendung zu erkunden. Die Tatsache, dass keine Konfiguration erforderlich ist und die Bündelzeit stark optimiert ist, macht Parcel zu einer Überlegung für zukünftige Projekte. Und mit mehr als 30.000 Sternen auf GitHub sieht es so aus, als ob es in der Community an Fahrt gewinnt.
Zusätzliche Ressourcen
- Parcel Examples: Parcel-Beispiele, die verschiedene Tools und Frameworks verwenden.
- Awesome Parcel: Eine kuratierte Liste von großartigen Parcel-Ressourcen, Bibliotheken, Tools und Boilerplates.
Der Quellcode für dieses Tutorial ist auf GitHub verfügbar
Das Autoprefixer-Team empfiehlt nicht, Zielbrowser in der Option
browsersanzugeben.Parcel fordert Sie sogar auf, eine Browserslist-Konfiguration zu erstellen (was auch der einzige offizielle Weg ist, Zielbrowser für Autoprefixer festzulegen).
Fügen Sie dies zu
package.jsonhinzuDiese Konfiguration wird von Autoprefixer *und Babel* verwendet. Als Ergebnis haben Sie einen einzigen Ort mit Zielbrowsern für alle Ihre Tools.
Es ist nicht notwendig,
NODE_ENV=developmentoderNODE_ENV=productionanzugeben, da dies durchserve/watchbzw.buildimpliziert wird.Ich bin mir nicht sicher, ob CRAP noch aktiv ist, keine Commits seit über 18 Monaten