Mich Ziel con este artículo era establecer una configuración simple que luego se pueda desarrollar. Ha sido una lucha para entender Webpack.
Was ich vorhabe, ist eine Suchfunktion mit einigen gefälschten (oder echten) JSON-Daten. In diesem Beitrag von schooljavascript.com, Ich werde mein Projekt-Setup durchgehen.
Machen Sie ein neues Projekt und CD darin:
mkdir react_search cd react_search
Erstellen Sie eine Datei package.json :
npm init
Wenn Sie alle Fragen überspringen möchten, fügen Sie die Markierung hinzu -Y:
npm init -y
Wir müssen installieren Webpack als Abhängigkeit dev y webpack-cli so können Sie verwenden Webpack in der Kommandozeile:
npm i webpack webpack-cli -D
- ich: Installieren
- -D: - save-dev
Erstellen Sie einen Ordner src mit Index.js und geben Sie den folgenden Code als Beispiel an:
console.log ("Hallo");
Fügen Sie nun Folgendes hinzu Skripte für dich package.json:
[/ php]
{
"Name": "react_search",
«Version»: «1.0.0»,
«Beschreibung»: «Anwendung mit React suchen»,
"Main": "index.js",
"Skripte": {
«Start»: »Webpack-Mode-Entwicklung«,
»Build«: »Webpack-Modus-Produktion»
},
"Schlüsselwörter": [],
»Autor«: »,
«Lizenz»: «ISC»,
"DevDependencies": {
"Webpack": "^ 4.0.1",
"Webpack-cli": "^ 2.0.10"
}
}
[/ php]
Das Webpack 4 jetzt hat es zwei Modi; Entwicklung y Produktion wo der Code in letzterem minimiert wird.
Überzeugen Sie sich selbst beim Laufen:
npm run start
Dadurch wird ein erstellt dist Ordner mit der Datei main.js innen (das Ihren Code enthält src).
Führen Sie nun Folgendes aus:
npm run build
React und Babel einrichten
Arbeiten mit Reagieren, wir müssen es zusammen mit installieren Babel. Dadurch wird der Code von übertragen ES6 zu ES5, ya que no todos los Browser son compatibles con ES6 noch (zum Beispiel, Internet Explorer).
Installieren Sie React und React als Abhängigkeit.
npm reagiere ich Reaktionssonne -S
Dann installieren Babel-Core , Babel-Lader , babel-preset-env y Babel-Preset-Reagieren als Entwicklungsabhängigkeit:
npm i babel-core babel-loader babel-preset-env babel-preset-reaktion -D
- Babel-Core: Transformieren Sie Ihren ES6-Code in ES5
- Babel-Lader: asistente de paquete Netz para transformar tus dependencias de JavaScript (por ejemplo, cuando importas sus componentes a otros componentes) con Babel
- babel-preset-env: Bestimmen Sie, welche Transformationen / Plugins verwendet werden sollen und Polyfüllungen (proporciona funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa) en función de la matriz de Browser que deseas admitir
- Babel-Preset-Reagieren: Babel voreingestellt für alles Zubehör Reagieren, zum Beispiel zu konvertieren JSX in Funktionen
Wir müssen eine Datei erstellen webpack.config.js um die Regeln für unseren Babel Loader festzulegen.
Dann müssen wir eine separate Datei namens erstellen .babelrc um die Optionen für bereitzustellen Babel-Lader. Sie können es in die Datei aufnehmen webpack.config.js, aber ich habe gesehen, dass die meisten Projekte dies getrennt haben. Dies führt zu einer besseren Lesbarkeit und kann von anderen Tools verwendet werden, die nicht mit dem Webpaket zusammenhängen. Wenn Sie erklären, dass Sie verwenden Babel-Lader In Ihrer Webpaketkonfiguration wird nach der Datei gesucht .babelrc Ja es gibt eins.
Dann ändern Sie Ihre Datei index.js eine Komponente darstellen:
Wir müssen auch eine Datei erstellen index.html im Ordner src Hier können wir unser Abschnittselement mit hinzufügen ID-Index. Hier rendern wir unsere Hauptkomponente React:
Jetzt müssen wir installieren HTML-Webpack-Plugin und verwenden Sie es in unserer Konfigurationsdatei Webpack. Dieses Plugin generiert eine Datei HTML mit injiziert, schreibst du es ein dist / index.html und minimieren Sie die Datei.
Installieren HTML-Webpack-Plugin als Entwicklungsabhängigkeit:
npm i html-webpack-plugin -D
Aktualisieren Sie die Einstellungen des Webpack auf diese Weise:
Plugins: [neues HtmlWebPackPlugin ({template: "./src/index.html", Dateiname: "./index.html"});
Der Wert, den ich dem Schlüssel gebe Vorlage Hier suche ich nach meiner Datei HTML. Der Wert des Dateinamens ist der Name des HTML minimiert, die in der generiert wird dist Ordner.
Wenn du jetzt rennst npm run startsollten Sie sehen, was generiert wird index.html auf der dist Ordner.
Laufen Sie offen dist / index.html und du solltest sehen Hallo, reagiere in Ihrem Browser.
Erstellen eines Webpack-Dev-Servers
Es ist etwas mühsam, diesen Befehl jedes Mal auszuführen, wenn Sie Ihre Änderungen im Browser sehen möchten. Damit das Webpack unsere Änderungen "sehen" und daher jedes Mal aktualisieren kann, wenn wir Änderungen an einer unserer Komponenten vorgenommen haben, können wir das Modul verwenden Webpack-Dev-Server.
Fahren Sie fort und installieren Sie dies als Entwicklungsabhängigkeit.
npm i webpack-dev-server -D
Ändern Sie dann die Startskripte von package.json So:
{"name": "react_search", "version": "1.0.0", "description": "Suchanwendung mit React", "main": "index.js", "scripts": {"start": " webpack-dev-server --Mode-Entwicklung --open "," build ":" webpack --mode-Produktion "}," keywords ": []," author ":" "," license ":" ISC "," Abhängigkeiten ": {" reagieren ":" ^ 16.2.0 "," Reaktionsdom ":" ^ 16.2.0 "" devDependencies ": {" babel-core ":" ^ 6.26.0 "," babel-loader " : "^ 7.1.4", "babel-preset-env": "^ 1.6.1", "babel-preset-react": "^ 6.24.1", "html-webpack-plugin": "^ 3.0. 6 "," webpack ":" ^ 4.1.1 "," webpack-cli ":" ^ 2.0.10 "," webpack-dev-server ":" ^ 3.1.0 "}}
Wenn du jetzt rennst npm run start Das solltest du sehen localhost: 8080 Öffnen Sie in Ihrem Standardbrowser, dafür ist die Flagge gedacht --Öffnen. Jedes Mal, wenn Sie Änderungen vornehmen, wird die Seite aktualisiert.
Sie können auch eine hinzufügen –Hot Flagge für dich Skript Von Anfang an npm Auf diese Weise können Sie nur die geänderte Komponente neu laden, anstatt eine vollständige Seitenwiederherstellung durchzuführen.
Konfigurieren CSS
Der letzte Teil beinhaltet das Einrichten unseres CSS. Da wir CSS-Dateien in unsere React-Komponenten importieren, benötigen wir das Modul CSS-Loader um sie zu lösen. Sobald dies behoben ist, benötigen wir auch einen Style Loader, um dies in unser DOM einzufügen und ein Tag hinzuzufügen im Element unseres HTML.
Installieren Sie beide Module als Entwicklungsabhängigkeit:
npm i css-loader style-loader -D
Beachten Sie, dass die Reihenfolge des Hinzufügens dieser Ladegeräte wichtig ist. Zuerst müssen wir die CSS-Dateien auflösen, bevor wir sie mit dem Style Loader zum DOM hinzufügen. Standardmäßig verwendet das Webpaket die Loader von rechts (letztes Element des Arrays) nach links (erstes Element des Arrays).
CSS modular gestalten
Wir können CSS auch modular gestalten Webpack. Esto significa que el nombre de la clase tendrá un Umfang local y específico para solo el componente en cuestión.
Zu diesem Zweck können wir einige Optionen für bereitstellen CSS-Loader:
Da wir Optionen angeben müssen, ist jedes Ladegerät jetzt ein Objekt mit einem Paar Schlüsselwert. Um CSS-Module zu aktivieren, müssen wir die Moduloption so einstellen CSS-Loader Sein verdadero. La opción importLoader Konfiguriert, wie viele Ladegeräte zuvor angewendet werden sollen CSS-Loader. Zum Beispiel, Sass-Lader müsste vorher kommen CSS-Loader.
Das localIdentName Mit dieser Option können Sie die generierte Identifikation konfigurieren.
- [Name] nimmt den Namen Ihrer Komponente an
- [lokal] ist der Name Ihrer Klasse / ID
- [Hash: base64] ist der zufällig generierte Hash, der im CSS jeder Komponente eindeutig ist
Um dies etwas visueller zu gestalten, gebe ich Ihnen ein Beispiel. Angenommen, Sie haben eine Komponente namens Für mein Ich habe einen Knopf mit einer Klasse CSS primaryButton. Ich habe auch eine andere Komponente namens Suchend ein Knopf darauf mit einer Klasse CSS primaryButton. Beide Klassen haben jedoch unterschiedliche CSS:
/ * Formularschaltfläche * / .primaryButton {Hintergrundfarbe: grün; } Suchschaltfläche .primaryButton {Hintergrundfarbe: blau; }}
Wenn das Webpaket Ihre Anwendung gruppiert, können je nachdem, welches CSS neuer ist, beide Schaltflächen grün oder blau anstelle von grün sein und mit blau suchen.
Hier ist die localIdentName geht an Ort und Stelle. Sobald Ihre App gepackt ist, haben Ihre Schaltflächen einen eindeutigen Klassennamen!
Wie Sie sehen können, unterscheidet sich der Klassenname der Schaltfläche in der Formularkomponente von dem der Komponente Suchen: Der Name beginnt mit dem Komponentennamen, dem Klassennamen und dem eindeutigen Hashcode.
Damit müssen Sie sich keine Gedanken darüber machen, ob Sie in Ihrer Anwendung denselben Klassennamen angegeben haben. Sie müssen sich nur Sorgen machen, wenn Sie es für dieselbe Komponente verwendet haben.
Esto concluye la primera parte de configurar una aplicación React desde cero. En la próxima publicación del Blog, mi objetivo es explicar cómo configurar las pruebas para TDD y cómo escribirlas.
