Arbeiten mit Sicherungskasten und Reagieren

0
6

Sie sind auf der Suche nach einer alternative bundler webpack, möchten Sie vielleicht werfen Sie einen Blick auf Sicherungskasten. Es baut auf dem auf, was webpack — Angebote- code-splitting, hot module nachladen, dynamische Importe, etc. — aber code-Aufspaltung im Sicherungskasten erfordert keine Konfiguration von default (obwohl webpack bieten die gleiche wie von version 4.0).

Stattdessen Sicherungskasten wurde für die Einfachheit (in form von weniger komplizierte Konfiguration) und Leistung (einschließlich von aggressiven caching-Methoden). Plus, es erweitert werden kann, verwenden Sie Tonnen von plugins, die behandeln alles, was Sie brauchen, über und jenseits der Standard.

Ach ja, und wenn Sie ein fan von Typoskript, sind Sie möglicherweise daran interessiert zu wissen, dass FuseBox macht es zu einem erste-Klasse-Bürger. Das bedeutet, dass Sie können eine Anwendung schreiben, in Typoskript — ohne Konfiguration! — und wird es mit dem Typoskript transpiler zum kompilieren von Skripts standardmäßig. Planen Sie nicht mit Typescript? Keine Sorge, der transpiler handhaben JavaScript. Noch ein weiterer bonus!

Um zu veranschaulichen, wie schnell es ist, aufzustehen und zu laufen, bauen wir die Knochen einer Anwendung erstellen-reagieren-app. Alles, was wir tun, wird auf GitHub, wenn Sie wollen, zu Folgen.

FuseBox ist nicht die einzige alternative zu webpack, natürlich. Es gibt viele und, in der Tat, Maks Akymenko hat eine große write-up Paket, das ist eine weitere gute alternative, lohnt ein Blick in.

Das basic setup

Erstellen Sie ein neues Projekt-Verzeichnis und initialisieren es mit npm:

## Erstellen des Verzeichnis
mkdir csstricks-Sicherungskasten-reagieren && $_
## Initialisieren mit npm-Standard-Optionen
npm-init -y

Nun können wir die Installation einige Abhängigkeiten. Wir bauen die app zu Reagieren, also müssen wir das auch als reagieren-dom.

npm install –save reagieren reagieren-dom

Als Nächstes installieren wir Sicherungskasten und Typoskript als Abhängigkeiten. Wir werfen Verunstalten gab es auch für die Hilfe minifying unsere scripts und hinzufügen von Unterstützung für das schreiben von styles in Sass.

npm install –save-dev fuse-box Typoskript verunstalten-Knoten js-sass

Okay, jetzt erstellen wir einen src-Ordner in den Stammordner des Projekt-Verzeichnisses (kann manuell getan werden). Fügen Sie die folgenden Dateien (`app.js und index.js) in es, einschließlich der Inhalte:

// App.js

import * wie Reagieren “reagieren”;
import * als logo von “./logo.svg”;

const App = () => {
return (
<div className=”App”>
<header className=”App-header”>
<img src= ” {logo} className=”App-logo” alt=”logo” />
<h1 className=”App-title”>Willkommen zu Reagieren</h1>
</header>
<p className=”App-intro”>
Um begonnen zu erhalten, Bearbeiten `src/App.js ” und speichern Sie neu zu laden.
</p>
</div>
)
};

export Standard-App;

Sie haben vielleicht bemerkt, dass wir den Import einer SVG-Datei. Sie können es herunterladen direkt aus dem GitHub-repo.

// index.js

import * wie Reagieren “reagieren”;
import * als ReactDOM aus “reagieren-dom”;
import App from “./App”

ReactDOM.render(
<App />, document.getElementById(‘root’)
);

Sie können sehen, dass die Art, wie wir behandeln den Import von Dateien ist ein wenig anders als eine typische app Reagieren. Das ist, weil der Sicherungskasten nicht polyfill importiert standardmäßig.

Also, statt dies zu tun:

importieren Reagieren “reagieren”;

…wir das tun:

import * wie Reagieren “reagieren”;
<!– ./src/index.html –>

<!DOCTYPE html>
<html lang=”de”>
<head>
<Titel>CSSTricks Fusebox Reagieren</title>
$css
</head>

<body>
<noscript>
Sie müssen JavaScript aktivieren, führen Sie dieses app.
</noscript>
<div id=”root”></div>
$bundles
</body>
</html>

Styling ist nicht wirklich der Punkt von diesem post, aber wir lassen etwas in dort zu kleiden, die Dinge ein wenig. Wir haben zwei stylesheets. Die erste ist für die App-Komponente gespeichert und als App.css.

/* App.css */

.App {
text-align: center;
}

.App-logo {
animation: App-logo-spin-20s infinite linear;
height: 80px;
}

.App-header {
background-color: #222;
Höhe: 150px;
padding: 20px;
Farbe: weiß;
}

.App-intro {
font-size: large;
}

@keyframes App-logo-spin {
aus {
transform: rotate(0deg);
}
zu {
transformieren:
rotate(360deg);
}
}

Die zweite stylesheet ist für index.js und sollten gespeichert werden, als index.css:

/* index.css */
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}

OK, wir sind fertig mit der ersten Zimmerreinigung. Auf der Verlängerung Sicherungskasten mit einigen goodies!

Plugins und Konfiguration

Wir sagten früher, dass die Konfiguration Sicherungskasten ist entworfen, um so weniger Komplex als die gerne von webpack — und das ist wahr! Erstellen Sie eine Datei namens fuse.js im root-Verzeichnis der Anwendung.

Wir beginnen mit dem importieren der plugins werden wir Gebrauch machen, alle plugins kommen von der FuseBox-Paket, die wir installiert haben.

const { Sicherungskasten, CSSPlugin, SVGPlugin, WebIndexPlugin } = require(“fuse-box”);

Als Nächstes werden wir initialisieren eine FuseBox-Instanz und sagen, was wir verwenden, wie das home-Verzeichnis und wo kompilierten assets:

const Sicherung = Sicherungskasten.init({
homeDir: “src”,
Ausgabe: “dist/$name.js”
});

Wir lassen FuzeBox wissen, dass wir beabsichtigen, verwenden Sie den TypeScript-compiler:

const Sicherung = Sicherungskasten.init({
homeDir: “src”,
Ausgabe: “dist/$name.js”,
useTypescriptCompiler: true,
});

Wir identifizierten plugins in der ersten Zeile der Konfigurationsdatei, aber jetzt haben wir Sie zu nennen. Wir verwenden die plugins ziemlich viel ist, aber auf jeden Fall überprüfen Sie heraus, was die CSSPlugin, SVGPlugin und WebIndexPlugin zu bieten haben, wenn Sie wollen, mehr feinkörnige Kontrolle über die Optionen.

const Sicherung = Sicherungskasten.init({
homeDir: “src”,
Ausgabe: “dist/$name.js”,
useTypescriptCompiler: true,
plugins: [ // HIGHLIGHT
CSSPlugin(),
SVGPlugin(),
WebIndexPlugin({
Vorlage: “src/index.html”
})
]
});

const { Sicherungskasten, CSSPlugin, SVGPlugin, WebIndexPlugin } = require(“fuse-box”);

const Sicherung = Sicherungskasten.init({
homeDir: “src”,
Ausgabe: “dist/$name.js”,
useTypescriptCompiler: true,
plugins: [
CSSPlugin(),
SVGPlugin(),
WebIndexPlugin({
Vorlage: “src/index.html”
})
]
});
– Sicherung.dev();
fuse
.Bündel(“app”)
.Anweisungen(`>index.js`)
.hmr()
.Uhr()

– Sicherung.run();

Sicherungskasten lässt uns konfigurieren Sie einen Entwicklungs-server. Wir können bestimmen, ports, SSL-Zertifikate, und sogar öffnen Sie die Anwendung in einem browser auf zu bauen.

Wir werden einfach den Standard-Umgebung für dieses Beispiel:

– Sicherung.dev();

Es ist wichtig für die Festlegung der Entwicklungsumgebung *bevor* die bundle-Anweisungen, die kommen als Nächstes:

fuse
.Bündel(“app”)
.Anweisungen(`>index.js`)
.hmr()
.watch().

Was zum Teufel ist das? Wenn wir initialisiert die FuseBox-Instanz, die wir angegeben, eine Ausgabe mit dist/$name.js. Der Wert für $name zur Verfügung gestellt von der Gebinde () – Methode. In unserem Fall setzen wir den Wert von app. Das bedeutet, dass, wenn die Anwendung gebündelt ist, das output-Ziel werden dist/app.js.

Die Anweisungen () – Methode definiert, wie der Sicherungskasten sollte sich mit dem code. In unserem Fall, wir sagen es, um mit zu beginnen index.js und, um es auszuführen, nachdem es geladen ist.

Die hmr () – Methode ist für die Fälle eingesetzt, wo wir wollen, aktualisieren Sie die Benutzer, wenn eine Datei geändert wird, wird diese in der Regel beinhaltet die Aktualisierung der browser-wenn sich eine Datei ändert. Unterdessen watch() re-bundles, die gebündelt code nach jeder gespeicherten änderung.

Mit, dass, wir werden es Mütze, durch die Einführung der build-Prozess mit Sicherung.run() am Ende der Konfigurations Datei. Hier ist alles, was wir nur bedeckt zusammengestellt:

const { Sicherungskasten, CSSPlugin, SVGPlugin, WebIndexPlugin } = require(“fuse-box”);

const Sicherung = Sicherungskasten.init({
homeDir: “src”,
Ausgabe: “dist/$name.js”,
useTypescriptCompiler: true,
plugins: [
CSSPlugin(),
SVGPlugin(),
WebIndexPlugin({
Vorlage: “src/index.html”
})
]
});
– Sicherung.dev();
fuse
.Bündel(“app”)
.Anweisungen(`>index.js`)
.hmr()
.Uhr()

– Sicherung.run();

Jetzt können wir führen Sie die Anwendung aus dem terminal mit aktiven Knoten zu verschmelzen. Dies startet den build-Prozess erstellt, die die dist-Ordner, der enthält die gebündelte code und die Vorlage, die wir in der Konfiguration angegeben. Nach dem build-Prozess erledigt ist, können wir im browser auf http://localhost:4444/, um zu sehen, unsere app.

Ausführen von Aufgaben mit Sparky

Sicherungskasten enthält einen task runner, der verwendet werden kann, um die Automatisierung eines build-Prozesses. Er heißt Sparky und Sie können denken, es als sorta wie Grunt und Gulp, mit dem Unterschied, dass es gebaut auf der Oberseite des Sicherungskasten mit Einbau-Zugang zum Sicherungskasten plugins und die FuseBox-API.

Wir don ‘ T haben, es zu benutzen, aber die Aufgabe für die Läufer machen Entwicklung viel leichter durch die Automatisierung Dingen würden wir sonst haben, um manuell tun und es macht Sinn zu verwenden, was speziell für die FuseBox.

Um es zu verwenden, aktualisieren wir die Konfiguration, die wir haben in fuse.js beginnend mit einigen Importen, die gehen an der Spitze der Datei:

const { src, Aufgabe, Kontext } = require(“fuse-box/sparky”);

Als Nächstes werden wir definieren einen Kontext, in dem ähnlich, was wir bereits haben. Wir sind im Grunde wickeln, was wir in Kontext und setConfig(), dann initialisieren Sicherungskasten in der Rückkehr:

Kontext({
setConfig() {
zurück Sicherungskasten.init({
homeDir: “src”,
Ausgabe: “dist/$name.js”,
useTypescriptCompiler: true,
plugins: [
CSSPlugin(),
SVGPlugin(),
WebIndexPlugin({
Vorlage: “src/index.html”
})
]
});
},
createBundle(fuse) {
zurück fuse
.Bündel(“app”)
.Anweisungen(`> index.js`)
.hmr();
}
});

Es ist möglich, Durchlaufen eine Klasse, Funktion oder Ebene-Objekt ein Kontext. Im obigen Szenario, wir ‘ re passing Funktionen, insbesondere setConfig() und createBundle(). setConfig() initialisiert Sicherungskasten und legt den plugins. createBundle() tut, was man erwarten könnte von den Namen, die Bündelung der code. Wieder, der Unterschied von dem, was wir vor haben ist, dass wir die Einbettung beide Funktionalitäten in verschiedene Funktionen, die enthalten sind in dem Kontext-Objekt.

Wir wollen, dass unsere Aufgabe, die Läufer zum ausführen von tasks, richtig? Hier sind ein paar Beispiele, die wir definieren können:

Aufgabe(“reinigen”, () => src(“dist”).säubern(“dist”).exec());
Aufgabe(“Standard”, [“rein”], async (Kontext) => {
const Sicherung = Kontext.setConfig();
– Sicherung.dev();
Kontext.createBundle(Sicherung);
warten auf Sicherung.run()
});

Die erste Aufgabe wird es sein, die verantwortlich für die Reinigung der dist-Verzeichnis. Das erste argument ist der name der Aufgabe, während der zweite ist die Funktion, die aufgerufen wird, wenn die Aufgabe ausgeführt wird.
Die erste Aufgabe, die wir tun können, Knoten, Sicherung rein vom terminal.

Wenn sich eine Aufgabe mit dem Namen default (das ist das erste argument, wie in der zweiten Aufgabe),, die Aufgabe wird es sein, das man aufgerufen wird, standardmäßig beim laufen-Knoten-Sicherung — in diesem Fall, das ist die zweite Aufgabe in unserer Konfiguration. Andere Aufgaben müssen müssen genannt werden explizit im terminal, wie ein Knoten Sicherung <task_name>.

So, unsere zweite Aufgabe ist es, die Standard-und drei Argumente an Sie übergeben. Das erste ist der name der task (`default`), die zweite ([“rein”]) ist eine Reihe von Abhängigkeiten, die aufgerufen werden soll, bevor die eigentliche Aufgabe ausgeführt wird, und die Dritte ist eine Funktion (Sicherung.dev ()), der bekommt die initialisiert FuseBox Instanz und beginnt die Bündelung und build-Prozess.

Jetzt können wir die Dinge laufen mit Knoten-Sicherung in der Klemme. Sie haben die Möglichkeit, fügen Sie diese zu Ihrem Paket.json-Datei, wenn das ist bequemer und Ihnen vertraut. Der Bereich ” Skript würde so Aussehen:

“scripts”: {
“start”: “node-Sicherung”,
“reinigen”: “node Sicherung rein”
},

Das ist ein wrap!

Alles in allem, FuseBox ist eine interessante alternative zu webpack für alle Ihre Anwendung Bündelung braucht. Wie wir gesehen haben, bietet es die gleiche Art von macht, die wir alle neigen dazu, wie etwa webpack, aber mit einer Weise, die weniger komplizierte Konfiguration, die macht es viel einfacher zum laufen zu bringen, Dank der eingebauten Typescript-support, performance-überlegungen, und ein task-runner, die entworfen, um die Vorteile der FuseBox-API.

Was wir uns anschauen, war ein ziemlich einfaches Beispiel. In der Praxis, sind Sie wahrscheinlich gehen, um die Arbeit mit komplexeren Anwendungen, sondern die Konzepte und Prinzipien sind die gleichen. Es ist schön zu wissen, dass der Sicherungskasten ist in der Lage Umgang mit mehr als, was gebacken hinein, sondern, dass das anfängliche setup ist immer noch super gestrafft.

Wenn Sie sich für weitere Informationen über Sicherungskasten, es ist Website und die Dokumentation sind offensichtlich guter Ausgangspunkt. die folgenden links sind auch super hilfreich sein, um mehr Perspektive auf, wie andere es einrichten und verwenden Sie es auf Projekte.

  • Die Einführung von FuseBox, eine alternative zu Webpack
  • WebPack ist nicht der einzige Weg
  • Einführung in die FuseBox (YouTube)