webentwicklung-frage-antwort-db.com.de

Was ist "npm run build" in der create -react-app?

Ich konnte keine Erklärung bezüglich der Arbeit von "npm run build" finden.

Es ist einfach und leicht zu bedienen und ich bekomme den "build" -Ordner, der großartig funktioniert.

Was passiert aber in der create -react-app genau hinter den Kulissen?

Ist es eine völlig andere Verwendung eines Build-Tools?

Wenn nicht, werden andere Build-Tools verwendet?

8
Ben Porat

Entwickler trennen JavaScript und CSS häufig in separate Dateien. Mit separaten Dateien können Sie sich darauf konzentrieren, mehr modulare Codeteile zu schreiben, die eine einzige Aufgabe erfüllen. Dateien, die eine Sache tun, verringern die kognitive Belastung, da die Wartung dieser Dateien eine recht umständliche Aufgabe ist.

Was passiert genau hinter den Kulissen? 

Wenn es Zeit ist, Ihre App in die Produktion zu verschieben, ist es nicht ideal, mehrere JavaScript- oder CSS-Dateien zu haben. Wenn ein Benutzer Ihre Site besucht, erfordert jede Ihrer Dateien eine zusätzliche HTTP-Anforderung , wodurch das Laden Ihrer Site langsamer wird ..__ Um dies zu beheben, können Sie ein "build" von unserer erstellen App, die alle Ihre CSS-Dateien in einer Datei zusammenführt, und dasselbe mit Ihrem JavaScript. Auf diese Weise minimieren Sie die Anzahl und Größe der Dateien, die der Benutzer erhält. Um diese "build" zu erstellen, verwenden Sie ein "build-tool" . Daher die Verwendung von npm run build.

Wie Sie zu Recht erwähnt haben, erzeugt das Ausführen des Befehls (npm run build) ein build-Verzeichnis. Angenommen, Sie haben in Ihrer App eine Reihe von CSS- und JS-Dateien:

css/
  mpp.css
  design.css
  visuals.css
  ...
js/
  service.js
  validator.js
  container.js
  ...

Nachdem Sie npm run build ausgeführt haben, lautet Ihr build-Verzeichnis:

build/
  static/
    css/
      main.css
    js/
      main.js

Jetzt hat Ihre App nur noch wenige Dateien. Die App ist immer noch gleich, wurde jedoch zu einem kleinen Paket namens build komprimiert.

Endgültiges Urteil: Sie fragen sich vielleicht, warum sich ein Build überhaupt lohnt, wenn er Ihren Benutzern lediglich einige Millisekunden Ladezeit erspart. Wenn Sie eine Website nur für sich selbst oder für ein paar andere Personen erstellen, müssen Sie sich nicht darum kümmern. Das Erstellen eines Builds Ihres Projekts ist nur für Websites mit hohem Datenaufkommen (oder von Websites, von denen Sie hoffen, dass sie in Kürze ein hoher Datenverkehr sind), erforderlich.

Wenn Sie nur Entwicklung lernen oder nur Websites mit sehr geringem Traffic erstellen, lohnt es sich möglicherweise nicht, einen Build zu erstellen.

11
patrick.1729

Es wird hier kurz erläutert: https://github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build .

React wird im Produktionsmodus korrekt gebündelt und der Build für die beste Leistung optimiert.

Der Build wird minimiert und die Dateinamen enthalten die Hashes.

Hinter den Kulissen verwendet Sie babel, um Ihren Code und Ihr Webpack als Build-Tool zu transpilieren , um Ihre Anwendung zu bündeln.

2
rgommezz