Es stehen viele Tools zur Verfügung, um die Umgebung für die React-Entwicklung vorzubereiten. In unserem
React-Lernprogramm wird beispielsweise das Tool zum Erstellen und Reagieren von Apps verwendet, um ein Vorlagenprojekt zu erstellen, das alles enthält, was Sie zum Entwickeln von React-Anwendungen benötigen. Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, möchte darüber sprechen, wie die Umgebung für die Entwicklung von React-Projekten mithilfe von Babel und Webpack unabhängig konfiguriert werden kann. Diese Tools werden auch in Projekten verwendet, die mit den Tools zum Erstellen und Reagieren von Apps erstellt wurden. Wir glauben, dass jeder, der sich mit der Entwicklung von React befasst, daran interessiert sein wird, sie und die Methodik zum Erstellen von React-Projekten auf einer tieferen Ebene kennenzulernen. Wir werden nämlich darüber sprechen, wie Webpack so konfiguriert wird, dass dieses Tool Babel verwendet, um JSX-Code in JavaScript-Code zu kompilieren, und wie der Server konfiguriert wird, der zum Entwickeln von React-Projekten verwendet wird.
Webpack
Webpack wird zum Kompilieren von JavaScript-Modulen verwendet. Dieses Tool wird häufig als "Bundler" (vom Bundler) oder "Modul-Builder" bezeichnet. Nach der
Installation können Sie über
die Befehlszeilenschnittstelle oder die
API damit arbeiten . Wenn Sie mit Webpack nicht vertraut sind, wird empfohlen, dass Sie sich über die
Grundprinzipien seiner Funktionsweise informieren und den
Vergleich mit anderen Modulherstellern ansehen. So sieht Webpack auf hohem Niveau aus.
Webpack ArbeitWebpack nimmt alles, wovon das Projekt abhängt, und konvertiert es in statische Ressourcen, die auf den Client übertragen werden können. Das Packen von Anwendungen ist sehr wichtig, da die meisten Browser die Möglichkeit einschränken, Ressourcen gleichzeitig herunterzuladen. Darüber hinaus können Sie Datenverkehr sparen, indem Sie dem Client nur das senden, was er benötigt. Insbesondere verwendet Webpack einen internen Cache, aufgrund dessen die Module nur einmal auf den Client heruntergeladen werden, was letztendlich zu einem schnelleren Laden von Websites führt.
Babel
Babel ist ein Transpiler, der hauptsächlich verwendet wird, um Konstruktionen, die in neueren Versionen des ECMAScript-Standards übernommen wurden, in ein Format zu konvertieren, das sowohl für moderne als auch für die neuesten Browser und andere Umgebungen, in denen JavaScript ausgeführt werden kann, verständlich ist. Babel kann außerdem mit
@ babel / preset-react in JavaScript- und JSX-Code konvertieren.
BabelDank Babel können wir bei der Entwicklung von React-Anwendungen JSX verwenden. Hier ist beispielsweise der Code, der JSX verwendet:
import React from "react"; function App(){ return( <div> <b>Hello world!</b> </div> ) } export default App;
Solcher Code sieht ordentlich aus, es ist klar, er ist leicht zu lesen und zu bearbeiten. Wenn Sie es betrachten, können Sie sofort verstehen, dass es eine Komponente beschreibt, die ein
<div> -Element zurückgibt, das den Text
Hello world! in Fettdruck. Und hier ist ein Beispiel für Code, der dasselbe tut, in dem JSX nicht verwendet wird:
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _react = require("react"); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function App(props) { return _react2.default.createElement( "div", null, _react2.default.createElement( "b", null, "Hello world!" ) ); } exports.default = App;
Die Vorteile des ersten Beispiels gegenüber dem zweiten liegen auf der Hand.
Voraussetzungen
Um ein React-Anwendungsprojekt einzurichten, benötigen wir die folgenden npm-Module.
- reagieren - Bibliothek reagieren.
- React-Dom ist eine Bibliothek, mit deren Hilfe wir die Funktionen von React im Browser nutzen können.
- babel / core - JSX-Transpilation in JS.
- babel / preset-env - Code erstellen, der für ältere Browser geeignet ist.
- babel / preset-react - Konfigurieren Sie den Transpiler so, dass er mit React-Code arbeitet.
- babel-loader - Konfigurieren Sie Webpack für die Arbeit mit Babel.
- CSS-Loader - Einrichten von Webpack für die Arbeit mit CSS.
- Webpack - Zusammenbau von Modulen.
- webpack-cli - Arbeiten Sie mit Webpack über die Befehlszeile.
- style-loader - lädt den gesamten verwendeten CSS-Code in den Header der HTML-Datei.
- webpack-dev-server - Einrichten eines Entwicklungsservers.
Erstellen Sie nun im
react-scratch Ordner ein neues Projekt mit npm (
npm init ) und installieren Sie einige der oben genannten Pakete mit dem folgenden Befehl:
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader webpack webpack-cli style-loader webpack-dev-server
Der Einstiegspunkt für das Programm ist die Datei
index.js , die sich im Ordner
src im Stammverzeichnis des Projekts befindet. Die Struktur dieses Projekts ist unten dargestellt. Einige Dateien und Ordner werden automatisch erstellt, andere müssen Sie selbst erstellen.
ProjektstrukturDas fertige Projekt, mit dem wir uns hier befassen werden, befindet sich in
diesem Repository.
Der
component enthält Projektkomponenten (in unserem Fall gibt es hier nur eine Komponente). Im
dist Ordner in der Datei
main.js befindet sich der kompilierte Code, und
index.html ist, wie bereits erwähnt, die Haupt-HTML-Datei unserer Anwendung.
Webpack-Setup
Webpack kann auf viele Arten konfiguriert werden. Insbesondere können die Einstellungen dieses Tools die Form von Befehlszeilenargumenten annehmen oder im Projekt als Konfigurationsdatei mit dem Namen
webpack.config.js . Darin müssen Sie das Objekt mit den Einstellungen beschreiben und exportieren. Wir werden mit dem Einrichten dieser Datei mit einer Beschreibung des Objekts beginnen, das so aussieht (wir werden es in Teilen betrachten und unten den vollständigen Code angeben):
{ entry: "./src/index.js", mode: "development", output: { filename: "./main.js" }, }
Die
entry Eigenschaft legt die Hauptdatei mit dem Projektquellcode fest. Der Wert der
mode Eigenschaft gibt den Typ der zu kompilierenden Umgebung an (in unserem Fall ist dies die
development ) und wo die kompilierte Datei abgelegt werden soll.
Projektarbeit
Fügen Sie den folgenden Code in die Datei
index.html unseres Projekts ein, die sich im Ordner
dist :
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>React From Scratch</title> </head> <body> <div id="root"> </div> </body> <script type="text/javascript" src="main.js"> </script> </html>
Achten Sie auf das in dieser Datei vorhandene
script Tag. Es verweist auf die Datei
main.js , die während der Kompilierung des Projekts abgerufen wird. Wir werden das
<div> -Element mit der
root ID verwenden, um die React-Anwendung anzuzeigen.
Installieren Sie nun die React- und React-Dom-Pakete:
npm install react react-dom
Fügen Sie
index.js den folgenden Code
index.js :
import React, { Component } from "react"; import ReactDOM from "react-dom"; import App from "./component/app.component"; ReactDOM.render(<App />, document.querySelector("#root"));
Dies ist der Standardcode für solche React-Anwendungsdateien. Hier verbinden wir die Bibliotheken, verbinden die Komponentendatei und zeigen die Anwendung im
<div> mit der
root ID an.
Hier ist der Code für die Datei
app.component.js :
import React, { Component } from "react"; import s from "./app.component.css"; class MyComponent extends Component { render() { return <div className={s.intro}>Hello World</div>; } } export default MyComponent;
Hier ist der Code für die Datei
app.component.css :
.intro { background-color: yellow; }
Konfigurieren Sie Babel
Babel ist ein Transporter mit großem Potenzial. Insbesondere kann er WENIGER in CSS, JSX in JS, TypeScript in JS konvertieren. Wir werden nur zwei Konfigurationen verwenden - reagieren und env (sie werden auch als "Voreinstellungen" bezeichnet). Babel kann auf verschiedene Arten konfiguriert werden. Insbesondere handelt es sich um Befehlszeilentools, eine spezielle Einstellungsdatei und die Standarddatei
package.json . Wir sind mit der letzten Option zufrieden. Fügen Sie
package.json den folgenden Abschnitt
package.json :
"babel": { "presets": [ "@babel/env", "@babel/react" ] }
Dank dieser Einstellungen weiß Babel, welche Voreinstellungen er verwenden muss. Konfigurieren Sie nun Webpack für die Verwendung von Babel.
Einrichten von Webpack für die Arbeit mit Babel
Hier verwenden wir die Babel-Loader-Bibliothek, mit der Sie Babel mit Webpack verwenden können. Tatsächlich geht es darum, dass Babel Dateien abfangen und verarbeiten kann, bevor sie von Webpack verarbeitet werden.
▍JS-Dateien
Hier sind die Regeln für die Arbeit mit JS-Dateien (dieser Code wird in die Datei
webpack.config.js ). Sie stellen eine der Eigenschaften des von dieser Datei exportierten Einstellungsobjekts dar:
module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader" } }, ] }
In der Regel-Eigenschaft des hier dargestellten Objekts wird ein Array von Regeln gespeichert, nach dem die durch den in der
test Eigenschaft beschriebenen regulären Ausdruck angegebene Datei verarbeitet werden soll. In diesem Fall wird die Regel auf alle Dateien mit den Erweiterungen
.m und
.js , während keine Dateien aus den
node_modules und
bower_components node_modules werden
bower_components . Außerdem geben wir hier an, dass wir den Babel-Loader verwenden möchten. Danach werden unsere JS-Dateien zuerst von Babel verarbeitet und dann mit Webpack gepackt.
SSCSS-Dateien
Fügen Sie die Einstellungen für die Verarbeitung von CSS-Dateien zum Regelarray des
module :
module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: [ "style-loader", { loader: "css-loader", options: { modules: true } } ] }, ] }
Wir werden die Aufgabe der Verarbeitung von CSS-Dateien mit Style-Loader und CSS-Loader lösen. Die
use Eigenschaft kann ein Array von Objekten oder Zeichenfolgen akzeptieren. Loader werden ab dem letzten aufgerufen, sodass unsere Dateien zuerst mit dem CSS-Loader verarbeitet werden. Wir haben dieses Tool konfiguriert, indem wir
true in die
modules Eigenschaft des
options Objekts geschrieben haben. Aus diesem Grund werden CSS-Stile nur auf die Komponenten angewendet, in die sie importiert werden. Der Css-Loader ermöglicht Importbefehle in CSS-Dateien. Anschließend fügt der Style-Loader im Abschnitt
<head> der Seite das hinzu, was sich in Form eines
style Tags herausstellt:
<style> <-- css --> </style>
▍Statische Ressourcen
Wir werden weiterhin am
module und die Regeln für die Verarbeitung statischer Ressourcen darin beschreiben:
module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: [ "style-loader", { loader: "css-loader", options: { modules: true } } ] }, { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] } ] }
Wenn das System auf eine Datei mit der Erweiterung PNG, SVG, JPG oder GIF stößt, wird der Dateilader zum Verarbeiten einer solchen Datei verwendet. Die Verarbeitung solcher Dateien ist wichtig für die ordnungsgemäße Vorbereitung und Optimierung des Projekts.
Einrichten eines Entwicklungsservers
Konfigurieren Sie nun in der Datei
webpack.config.js den Entwicklungsserver:
devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000, watchContentBase: true, progress: true },
Die
contentBase Eigenschaft des
contentBase Einstellungsobjekts verweist auf den Ordner, in dem sich unsere Ressourcen und die Datei
index.html befinden. Mit der Eigenschaft
port können Sie den Port angeben, den der Server abhören soll. Mit der Eigenschaft
watchContentBase können Änderungen an Dateien in dem durch die Eigenschaft
contentBase angegebenen Ordner
contentBase .
Hier ist der vollständige Code für die Datei
webpack.config.js :
const path = require("path"); module.exports = { entry: "./src/index.js", mode: "development", output: { filename: "./main.js" }, devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000, watchContentBase: true, progress: true }, module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: [ "style-loader", { loader: "css-loader", options: { modules: true } } ] }, { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] } ] } };
Jetzt fügen wir der
package.json im Abschnitt "
scripts " den Befehl zum Starten des Entwicklungsservers und den Befehl zum Starten der Erstellung des Projekts hinzu:
"scripts": { "dev": "webpack-dev-server", "start": "webpack" },
Jetzt ist alles bereit, um den Entwicklungsserver mit dem folgenden Befehl zu starten:
npm run dev
Wenn Sie jetzt zur Adresse
http: // localhost: 9000 gehen , können Sie die Seite unseres Projekts sehen.
Projektseite im BrowserVerwenden Sie den folgenden Befehl, um ein Projekt zu erstellen:
npm run start
Danach können Sie die Datei
index.html in einem Browser öffnen und dasselbe sehen, was Sie sehen können, indem Sie den Entwicklungsserver starten und zur Adresse
http: // localhost: 9000 gehen .
Zusammenfassung
Dieser Artikel bietet einen Überblick über das Einrichten von Webpack und Babel zur Verwendung in React-Projekten. Tatsächlich können viel komplexere Konfigurationen auf der Basis erstellt werden, die wir heute auseinander genommen haben. Anstelle von CSS können Sie beispielsweise WENIGER anstelle von regulärem JS verwenden und in TypeScript schreiben. Bei Bedarf können Sie beispielsweise die Dateiminimierung und vieles mehr konfigurieren. Wenn Sie heute zum ersten Mal mit dem Prozess der Selbstoptimierung von React-Projekten vertraut sind, denken Sie natürlich, dass dies alles sehr schwierig und die Verwendung der vorgefertigten Vorlage viel einfacher ist. Nachdem Sie es jedoch ein wenig herausgefunden haben, werden Sie feststellen, dass eine geringfügige Erhöhung der Komplexität der Einstellungen Ihnen mehr Freiheit gibt, sodass Sie Ihre Projekte genau nach Ihren Wünschen anpassen können, ohne sich vollständig auf einige „Standard“ -Lösungen verlassen zu müssen und Ihre Abhängigkeit von zu verringern sie.
Liebe Leser! Welchen Ansatz verwenden Sie am häufigsten, wenn Sie Ihre Arbeitsumgebung auf React-Projekte vorbereiten?