Mit Paket als Bundle für Anwendungen Reagieren

0
43

Sie haben vielleicht schon vertraut sein mit webpack für das asset-management der Projekte. Es gibt jedoch ein weiteres cooles tool es als Paket, das ist vergleichbar mit webpack in, dass es hilft, mit hassle-free asset bündeln. Wo das Paket wirklich glänzt ist, dass es erfordert keine Konfiguration zu laufen bekommen, wo andere bundlers erfordern Häufig schreiben eine Tonne code einfach, um loszulegen. Plus, Paket ist super schnell, wenn es läuft, weil es nutzt multicore-Verarbeitung, wo andere arbeiten, komplexe und schwere der Transformationen.

So, in Kürze, wir sind Blick auf eine Reihe von Funktionen und Vorteile:

  • Code splitting mit dynamischen imports
  • Vermögenswerte Handhabung für jede Art von Datei, aber natürlich auch für HTML, CSS und JavaScript
  • Hot-Modul-Ersatz zu aktualisieren Elemente ohne Seiten-refresh während der Entwicklung
  • Fehler im code werden hervorgehoben, wenn Sie angemeldet sind, so dass Sie leicht zu lokalisieren und zu korrigieren
  • Umwelt-Variablen zu unterscheiden zwischen lokalen und Produktion Entwicklung
  • Ein “Produktions-Modus” beschleunigt den Aufbau durch unnötige build-Schritte

Hoffentlich, du bist beginnen zu sehen, gute Gründe für die Verwendung von Paket. Das ist nicht zu sagen, es sollte verwendet werden, 100% oder alle der Zeit, sondern, dass es gute Fälle, in denen es sehr viel Sinn macht.

In diesem Artikel werden wir sehen, wie ein Projekt Reagieren mit Paket. Während wir gerade dabei sind, wir werden auch prüfen, eine alternative für das Erstellen Reagieren-App, die wir verwenden können, mit Paket zu entwickeln, Reagieren Anwendungen. Das Ziel hier ist, sehen, dass es andere Wege gibt, um Arbeit zu Reagieren, mit Paket-als ein Beispiel.

Einrichten eines neuen Projekts

OK, das erste, was wir brauchen, ist ein Projekt Ordner vor Ort zu arbeiten. Wir können einen neuen Ordner, und navigieren Sie direkt von der Befehlszeile aus:

mkdir csstricks-reagieren-Paket && $_

Als Nächstes Holen wir uns unsere obligatorische Paket.json Datei vorhanden. Wir können entweder machen Sie Gebrauch von npm oder Garn durch eine der folgenden ausgeführt:

## Mit npm
npm-init -y

## Mit Garn, das werden wir auch weiterhin mit dem gesamten Artikel,
Garn-init -y

Dies gibt uns ein Paket.json-Datei in unserem Projekt-Ordner mit den Standard-Konfigurationen, die wir brauchen, vor Ort zu arbeiten. Apropos, ist der Paket-Paket kann installiert werden, weltweit, aber für dieses tutorial installieren wir es lokal als dev-dependency.

Wir brauchen Babel bei der Arbeit in Reagieren, so lassen Sie uns das gehen:

Garn hinzufügen Paket-Bundle-babel-preset-env babel-preset-reagieren –dev

Als Nächstes installieren wir Reagieren und ReactDOM…

Garn hinzufügen, reagieren, reagieren-dom

…erstellen Sie dann ein babel.rc-Datei und fügen Sie diese an:

{
“presets”: [“env”, “reagieren”]
}

Als Nächstes erstellen wir unser Basis-App-Komponente, die in eine neue index.js Datei. Hier ist auf die schnelle, gibt einfach ein “Hallo” in der überschrift:

importieren Reagieren von ‘reagieren’
import ReactDOM von ‘reagieren-dom”
Klasse App erweitert Reagieren.Komponente {
render() {
return (
<Reagieren.Fragment>
<h2>Hallo!</h2>
</Reagieren.Fragment>
)
}
}

const rootElement = document.getElementById(“root”);
ReactDOM.render(<App />, rootElement);

Wir benötigen eine HTML-Datei, wo die App-Komponente montiert werden, so erstellen wir eine index.html Datei im src-Verzeichnis. Wieder, hier ist eine ziemlich einfache shell-arbeiten:

<html lang=”de”>
<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”>
<Titel>Paket Reagieren Beispiel</title>
</head>
<body>
<div id=”root”></div>
<script src=”./index.js”></script>
</body>
</html>

Wir verwenden dazu das Paket Paket, das wir zuvor installiert haben. Damit das funktioniert, müssen wir Bearbeiten das start-Skript im Paket.json-Datei, so dass es wie folgt aussieht:

“scripts”: {
“start”: “NODE_ENV=Entwicklung Paket src/index.html –öffnen”
}

Schließlich gehen wir wieder zurück zur Kommandozeile und führen Sie das Garn beginnen. Sollte die Anwendung starten und öffnen Sie ein neues browser-Fenster zeigen http://localhost:1234/.

Arbeiten mit Formatvorlagen

Paket-Schiffe mit PostCSS out of the box, aber, wenn wir wollten etwas anderes, wir können völlig tun. Wir können zum Beispiel Knoten installieren-sass zu verwenden, Sass auf dem Projekt:

Garn hinzufügen –dev-node-sass autoprefixer

Wir haben bereits autoprefixer, da es ein PostCSS-plugin, so können wir konfigurieren, die in der postcss-block-Paket.json:

// …
“postcss”: {
“Module”: false,
“plugins”: {
“autoprefixer”: {
“Browser”: [“>1%”, “letzten 4 Versionen”, “Firefox ESR”, “nicht ie < 9”],
“flexbox”: “Nein ” 2009″
}
}
}

Die Einrichtung einer Produktionsumgebung

Wir wollen sicherstellen, dass unser code und Elemente zusammengestellt, die für die Produktion verwenden, so lassen Sie uns sicherstellen, dass wir sagen, unser build-Prozess, wo diejenigen, die gehen wird. Wieder im Paket-json:

“scripts”: {
“start”: “NODE_ENV=Entwicklung Paket src/index.html -öffnen”,
“bauen”: “NODE_ENV=Produktion Paket bauen dist/index.html -public-url ./”
}

Läuft das Garn ausführen, erstellen nun erstellen Sie die Anwendung für die Produktion und Ausgabe, die es in den dist-Ordner. Es gibt einige zusätzliche Optionen, die wir hinzufügen können zu verfeinern, die Dinge ein wenig weiter, wenn wir möchten:

  • –out-dir Verzeichnis-name: verwenden Sie ein anderes Verzeichnis für die Produktions-Dateien statt der Standard-Verzeichnis “dist”.
  • –no-minifizieren: Minifizierung ist standardmäßig aktiviert, aber wir können es deaktivieren mit diesem Befehl.
  • –no-cache: Dies ermöglicht es uns, deaktivieren Sie die Dateisystem-cache.

💩 MIST (Erstellen Sie Reagieren App-Paket)

Erstellen Sie Reagieren App-Paket (MIST) ist ein Paket von Shawn Swyz Wang zu helfen, schnell zu Reagieren Anwendungen für Paket. Anhand der Dokumentation können wir jede bootstrap-Anwendung, indem Sie dies ausführen:

npx erstellen-reagieren-app-Paket-my-app

Das erstellen der Dateien und Verzeichnisse, die wir brauchen, um anfangen zu arbeiten. Dann können wir migrieren über den Anwendungsordner und starten Sie den server.

cd my-app
Garn start

Paket ist fertig!

Paket ist einen Besuch Wert, bei Ihrem nächsten Anwendung Reagieren. Die Tatsache, dass es benötigt keine Konfiguration und die bundle-Zeit ist super optimiert, macht das Paket eine überlegung Wert, auf ein zukünftiges Projekt. Und, mit mehr als 30.000 Sterne auf GitHub, es sieht aus wie etwas, dass immer einige Traktion in der Gemeinschaft.

Zusätzliche Ressourcen

  • Paket Beispiele: Paket-Beispiele für die Verwendung von verschiedenen tools und frameworks.
  • Genial Paket: Eine kuratierte Liste von awesome Paket-Ressourcen, Bibliotheken, tools und Textbausteinen.

Der Quellcode für dieses tutorial ist verfügbar auf GitHub