Reagieren Sie auf die Einrichtung der Js-Umgebung mit WebPack

React Js bietet ein integriertes CLI-Umgebungs-Setup, Erstellen-Reagieren-App. Und die Einrichtung mit create-react-app ist sehr einfach und leicht zu starten.
F. Warum müssen wir also über die Setup-Reaktions-js-Umgebung mit WebPack und babel Bescheid wissen?
A. Da im Grunde genommen die meisten Dinge mit babel und WebPack eingerichtet werden, besteht der einzige Teil darin, wie viel Sie tiefer gehen und die Grundlagen der Einrichtung der CLI-Umgebung kennenlernen können. Die Grundlagen Ihrer Arbeit zu kennen, wird Ihnen helfen, die Dinge nach Ihren Wünschen zu mischen. Also lasst uns anfangen.
Erstellen Sie einen Ordner namens „react_setup“ und öffnen Sie diesen Ordner in Ihrem Terminal.
Wir werden webpack und webpack-cli als Entwicklerabhängigkeiten einrichten:-

npm install webpack webpack-cli -D

Es bringt alle webpack- und webpack-cli-bezogenen Node-Module in den node-module-Ordner.
Jetzt bringen wir unsere Babel-Entwicklerabhängigkeiten zu Knotenmodulen: –

npm install babel-core babel-loader babel-preset-env babel-preset-react -D

es gibt einige weitere babel- und webpack-abhängigkeiten, die wir später in diesen setup-prozess einbringen werden.
Jetzt ist es an der Zeit, „react“ und „react-dom“ als Abhängigkeiten in unser Projekt zu bringen. Also zurück zum Terminal und Befehl schreiben :-
npm installiere React React-Dom – speichere
– save wird das Setup als Abhängigkeiten in unserer package.json reagieren
Schauen wir uns also unsere aktuelle package.json an

{
 "name": "react_setup",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "babel-core": "⁶.26.3",
 "babel-loader": "⁷.1.4",
 "babel-preset-env": "¹.7.0",
 "babel-preset-react": "⁶.24.1",
 "webpack": "⁴.12.1",
 "webpack-cli": "³.0.8"
 },
 "dependencies": {
 "react": "¹⁶.4.1",
 "react-dom": "¹⁶.4.1"
 }
}

Jetzt haben wir also alle devDependencies und Abhängigkeiten in unserer package.json und alle Abhängigkeiten werden in das Knotenmodul geladen. Wenn Sie das obere Setup nicht durchführen möchten, können Sie diese package.json in Ihren Projektordner kopieren und den Befehl npm install ausführen, um die Projektgrundlagen einzurichten.
Wechseln Sie nun zur Webpack-Konfiguration für unser Projekt.
Erstellen Sie also eine Datei webpack.config.js von Ihrem bevorzugten Texteditor oder vom Terminal mit dem Befehl touch webpack.config.js (für Mac)
Öffnen Sie webpack.config.js in Ihrem Texteditor und starten Sie das Konfigurationssetup :-

var webpack = require('webpack');
var path = require('path');
module.exports = {
 entry: path.resolve(__dirname, 'src') + '/index.js',
 output: {
 path: path.resolve(__dirname, 'public'),
 filename: 'bundle.js',
 publicPath: '/public/'
 },
 module: {
 rules : [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: "babel-loader"
 }
 }
 ]
 },
 watch: true
};

Gemäß dieser Webpack-Konfiguration ist unser Projekteintragspfad index.js, der sich im Ordner „src“ befindet, und unser Ausgabepfad ist ein Ordner mit dem Namen „public“, und unser Ausgabedateiname ist bundle.js, und wir definieren auch a publicPath als öffentlicher Ordner.
Um nun Regeln für unsere Bundle-Erstellung einzurichten, werden wir Module und Regeln als ein Array von Objekten definieren, die babel-loader verwenden, um unser es6 (ECMA Script 2015 oder höher) in es5 zu konvertieren, da die Mehrheit der Browser immer noch nur es5 und versteht Wir möchten auch, dass unser Projekt auch mit älteren Browsern abwärtskompatibel ist.
Jetzt ist es an der Zeit, Babel-Presets einzurichten: –
Erstellen Sie also eine Datei namens .babelrc und fügen Sie den Code ein:-

{
 "presets": ["env", "react"]
}

Jetzt sind wir alle mit der Einrichtung der Umgebung fertig, Zeit, mit unserem Hauptziel zu beginnen, React zu schreiben :-
Erstellen Sie also einen Ordner mit dem Namen ‚src‘ (mkdir src)
und erstellen Sie eine Datei index.js (wichtig – weil wir Webpack angewiesen haben, unser Bundle nur von index.js aus zu starten). Unsere index.js wird also so aussehen.
Reagieren von ‘Reagieren’ importieren;
importiere ReactDOM aus ‘react-dom’;
ReactDOM.render(

React startet

, document.getElementById(‘react-root’));
Jetzt fragen wir uns mit index.html, wie wir dieses document.getElementById des React-Root-Elements bekommen haben. Du hast Recht. Wir brauchen eine index.html, die im öffentlichen Ordner liegt.
Erstellen Sie einen Ordner mit dem Namen „public“ und erstellen Sie eine Datei index.html im öffentlichen Ordner.
index.html sieht folgendermaßen aus:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <div id="react-root"></div>
 <script src="bundle.js"></script>
</body>
</html>

Es ist Zeit zu überprüfen, ob alles richtig funktioniert :-
Also müssen wir das Webpack starten, aber wir haben den Befehl zum Paket.json nicht eingerichtet und erstellt oder gestartet, also wechseln Sie zu Paket.json und suchen Sie Skripte und fügen Sie sie unten in die Skripte ein;-

"build": "webpack -p"

Es wird eine produktionsbereite Datei webpack bundle.js erstellt
Drücken Sie also den Befehl als

npm run build

Überprüfen Sie nun Ihren öffentlichen Ordner, Sie finden eine bundle.js, die von webpack erstellt wird.
Jetzt können Sie Ihre index.html ausführen, indem Sie auf Ihre Datei im Ordner „react_setup/public“ doppelklicken:

Screenshot vom 27.06.2018 um 9.11.38 Uhr.png
Projektausgabe

Unser Setup ist also abgeschlossen, genießen Sie die Entwicklung. Wenn Ihnen dieses Tutorial gefällt, geben Sie Ihre Kommentare und Vorlieben ab und stellen Sie Ihre Zweifel frei.

Similar Posts

Leave a Reply

Your email address will not be published.