Vergleich der neuen Generation von Build -Tools

Eine Reihe neuer Entwickler-Tools sind im vergangenen Jahr gelandet und bis hin zu den Tools beißen, die in den letzten Jahren die Front-End-Entwicklung dominiert haben, darunter Webpack, Babel, Rollup, Parcel, Create-React-App.

Diese neuen Tools sind nicht so konzipiert, dass sie genau dieselbe Funktion ausführen, und jedes hat unterschiedliche Dinge, die sie erreichen möchten, und um die Funktionen zu erreichen. Trotz ihrer Unterschiede teilen diese Tools ein gemeinsames Ziel: Verbesserung der Entwicklererfahrung.

Inhaltsverzeichnis

1. Warum kommen diese Werkzeuge jetzt alle an?
2. Wie unterscheiden sich diese von vorhandenen Tools?
3. Das Experiment
4. Vergleichbare Merkmale
5. Esbuild
6. Schneedecke
7. Vite
8. WMR
9. Feature -Vergleich
10. Einpacken

Insbesondere möchte ich jeden bewerten und beschreiben, was sie tun, warum wir sie brauchen und deren Anwendungsfälle. Mir ist klar, dass Vergleiche nicht immer fair sind. Auch hier ist es nicht so, dass eines der Dinge, die wir in diesem Artikel betrachten, direkte Konkurrenten sind. In der Tat verwenden Schneedecke und Vite esbuild tatsächlich unter der Motorhaube für bestimmte Aufgaben. Unser Ziel ist es mehr, die Landschaft von Entwicklerwerkzeugen, die Aufgaben ausführen, um unsere Arbeit zu erleichtern. Auf diese Weise sehen wir, welche Optionen da draußen sind und wie sie sich stapeln, damit wir die besten Entscheidungen treffen können, wenn wir sie brauchen.

All dies wird natürlich durch meine Erfahrung mit React und Preact gefärbt. Ich bin mit diesen Frameworks -Bibliotheken besser vertraut, aber wir werden ihre Unterstützung auch für andere Front-End-Frameworks betrachten.

Es gab viele großartige Artikel, Streams und Podcasts über diese neuen Entwicklerwerkzeuge. Es gibt ein paar ShopTalk -Show -Episoden, die ich für den weiteren Kontext empfehlen würde: Episode 454 Diskutiert Vite und Episode 448 Feature The Creators of WMR und Snowpack. Etwas, das sich von diesen Episoden abhebt, ist, dass eine große Menge an Arbeit in den Aufbau dieser Tools zur Modernisierung unserer Entwicklerumgebungen eingegangen ist.

Warum kommen diese Werkzeuge jetzt alle an?

Zum Teil denke ich, dass diese Tools als Reaktion auf JavaScript -Tooling -Müdigkeit ankommen - etwas, das in diesem Artikel über das Erlernen von JavaScript im Jahr 2016 gut erfasst wurde. Sie füllen auch einen fehlenden Mittelweg zwischen dem Schreiben einer einzigen Vanille -JavaScript -Datei und dem Download von 200 Megabyte mit Werkzeugen, bevor Sie eine Grenze Ihres eigenen Codes geschrieben haben. Sie kommen ohne Abhängigkeitsliste mit Batterien und sind Teil eines Trends, Schichten im JavaScript-Ökosystem zu kollabieren.

Snowpack, Vite und WMR wurden durch native JavaScript -Module im Browser aktiviert. Bereits im Jahr 2018 wurde Firefox 60 mit der standardmäßigen Aktivität von ECMAScript 2015 -Modulen veröffentlicht. Seitdem haben alle großen Browser -Motoren native Javascript -Module unterstützt. Node.js wird auch im November 2019 mit nativen JavaScript -Modulen versendet. Wir finden immer noch heraus, welche Möglichkeiten native Javascript -Module heute im Jahr 2021 freischalten.

Wie unterscheiden sich diese von vorhandenen Tools?

Egal, ob wir WebPack, Rollup oder Parcel für einen Entwicklungsserver verwenden, das Tool bündelt unsere gesamte Codebasis aus unserem Quellcode und einem Ordner node_modules aus, führt diese durch Build -Prozesse aus - wie Babel, TypeScript oder POSTSS - dann den gebündelten Code in unseren Browser. Dies alles erfordert Arbeit und kann die Entwicklung von Servern in größeren Codebasen zu einem Crawl verlangsamen, auch nach all der Arbeit, die in das Caching und Optimieren gekommen ist.

Snowpack-, Vite- und WMR -Entwicklungsserver folgen diesem Modell nicht. Stattdessen warten sie, bis der Browser eine Importanweisung findet und eine HTTP -Anfrage für das Modul stellt. Erst nachdem diese Anfrage gestellt wurde, wendet das Tool Transformationen in das angeforderte Modul und alle Blattknoten im Importbaum des Moduls an und serviert diese dann dem Browser. Dies beschleunigt die Dinge erheblich, da es weniger Arbeiten beim Drücken auf einen Entwicklerserver gibt.

Sie werden bemerken, dass esbuild auf diesem Bild fehlt. Es ist in erster Linie ein Bundler . Es bündelt nicht so, wie es die anderen Werkzeuge tun. Stattdessen verarbeitet ESBuild den Code extrem schnell, indem teure Transformationen vermieden, die Parallelisierung nutzt und die GO -Sprache verwendet.

Das Experiment

Ich nahm eine der Beispiel -Apps aus den React -Dokumenten und baute sie mit jedem in diesem Artikel behandelten Tool um. Das Projekt, mit dem ich ging, wurde von Yogita Verma geschnappt. Hier ist ein Link zum ursprünglichen Repo und ein Link zu meinem Repo mit den vier Versionen von Snap Shot, die jeweils ein anderes Build -Tool verwenden. Wir werden die Ausgabe jedes Builds Schritt später vergleichen. Das Wiederaufbau dieser App ermöglichte es mir, die Entwicklererfahrung zu testen, um einige ziemlich Standard -React -Abhängigkeiten in die Tools zu ziehen, einschließlich React -Router und Axios.

Vergleichbare Merkmale

Bevor wir uns mit den Einzelheiten jedes einzelnen Tools befassen, unterstützen sie alle die folgenden Funktionen außerhalb der Box (in unterschiedlichem Maße):

• Erstklassige Unterstützung für native JavaScript-Module
• Typscript -Kompilierung (aber nicht Typprüfung)
• JSX
• Plugin -API für Erweiterbarkeit
• Ein integrierter Entwicklungsserver
• CSS-Bündelung und Unterstützung für CSS-in-JS-Bibliotheken

Alle diese Tools können TypeScript in JavaScript kompilieren, tun dies jedoch auch dann, wenn Typfehler vorliegen . Für die ordnungsgemäße Überprüfung des Typs müssen Sie TypeScript installieren und TSC -Noemit in Ihrer Root -JavaScript -Datei ausführen, oder verwenden Sie alternativ Editor -Plugins, um Fehlertypfehler anzuschauen.

OK, schauen wir uns jedes Tool an.

Esbuild

Esbuild wurde von Evan Wallace (CTO von Figma) erstellt. Seine Hauptmerkmale ist, dass es einen Build-Schritt 10 × -100 × schneller bietet als Bundler auf Knotenbasis (nach eigenen Benchmarks). Es bietet nicht viele der Entwicklerannehmlichkeiten, die Sie möglicherweise in so etwas wie Create-React-App finden. Aber es gibt immer mehr ESBUILD-Starter, die diese Lücken füllen, einschließlich der Erstellung von React-App-ESBuild, Estrella und Snowpack, die Esbuild für seinen Build-Schritt verwendet.

Esbuild ist sehr neu. Es hat noch keine 1.0 -Version erreicht und ist nicht ganz bereit für die Produktionsanwendung - aber es ist nicht weit weg. Es gibt Ihnen intuitive JavaScript- und Befehlszeilen -APIs mit intelligenten Standardeinstellungen.

Anwendungsfälle

Esbuild ist ein kompletter Game-Changer in der Bundler-Welt. Es wird in großen Codebasen am nützlichsten sein, bei denen der Geschwindigkeitsunterschied zwischen Esbuild und Knotenbundler multipliziert wird. Wenn Esbuild 1.0 trifft, wird es in großen Produktionsstandorten sehr nützlich sein und sparen Teams viel Zeit, um auf die Fertigstellung von Builds zu warten. Leider müssen große Produktionsseiten warten, bis Esbuild stabil wird. In der Zwischenzeit ist es einfach gut, Ihren Bündelung in Nebenprojekten etwas Geschwindigkeit zu verleihen.

Esbuilds blitzschnelle Geschwindigkeit wird ein Bonus für jede Art von Arbeit sein, die Sie leisten. Weniger Zeit, die auf Builds zu warten, wird immer gut für die Entwicklererfahrung sein! Wenn Sie schnelle Anwendungen prototypieren, möchten Sie möglicherweise mit etwas hoherem Niveau als Esbuild beginnen. Andernfalls müssen Sie einige Zeit damit verbringen, Abhängigkeiten zu ziehen und Ihre Umgebung zu konfigurieren, bevor Sie die Annehmlichkeiten erhalten, die wir im JavaScript -Ökosystem erwarten. Wenn Sie die Größe Ihres Bündels so weit wie möglich minimieren möchten, möchten Sie möglicherweise Rollup und Terser verwenden, wodurch etwas kleinere Bündelgrößen erzeugt.

Aufstellen

Ich habe mich entschlossen, ein React -Projekt in Esbuild auf naive Weise zu starten: NPM Installation von Esbuild, React und Reactdom. Ich habe eine src/app.jsx -Datei und eine dist/index.html -Datei erstellt. Dann habe ich den folgenden Befehl verwendet, um die App in eine dist/bündel.js -Datei zu kompilieren:

 .

Als ich im Browser index.html gehostete und geöffnet habe, wurde ich mit dem „weißen Bildschirm des Todes“ und einem "Uncortht ReferenceError: Process" nicht definiert "Konsolenfehler getroffen. Sowohl die Dokumente als auch die CLI erklären genau, was Sie tun müssen, um dies zu verhindern, aber für Anfänger ist es möglicherweise ein bisschen ein „Gotcha“, da es beim Bündeln ein zusätzliches Argument erfordert:

 -Define: process.env.node_env = \ "Produktion \"

Oder wenn Sie ESBuild in NPM -Skripte einbeziehen, die so geschrieben wurden, um den Zitaten zu entkommen:

 -Define: process.env.node_env = \\\ "Produktion \\\"

Dieses definierte Argument ist für jede Bibliothek benötigt, die für den Browser gebündelt ist, der Node -Umgebungsvariablen erwartet. Vue 2.0 erwartet auch diese. Sie werden nicht das gleiche Problem mit Preact haben, da es keine Umgebungsvariablen und -versuche erwartet, die standardmäßig für den Browser bereit sind.

Nachdem ich den Befehl mit dem Define -Argument geleitet hatte, funktionierte meine React -App „Hello World“ perfekt. JSX arbeitet mit .jsx -Dateien aus dem Feld. Das heißt, React muss manuell importiert werden und dann wird JSX in die React.Createelement umgewandelt. Es gibt jedoch Möglichkeiten, automatische Importe in JSX hinzuzufügen und/oder JSX für Preact zu konfigurieren.

Verwendung

ESBUILD bietet eine Option für einen Entwicklungsserver. Dies umgeht das Dateisystem und dient Modulen direkt aus dem Speicher, um sicherzustellen, dass der Browser nicht ältere Versionen von Modulen zieht. Es beinhaltet jedoch kein Live/Heiß -Nachladen, sodass Sie den Browser nach dem Speichern erfrischen, was kein ideales Erlebnis ist.

Ich habe mich entschlossen, die neu veröffentlichte Uhrenfunktion zu verwenden. Dies fordert ESBUILD bei, dass sie jedes Mal, wenn eine Quelldatei gespeichert wird, den Code neu kompiliert. Wir brauchen jedoch immer noch einen Server, um unsere gespeicherten Änderungen zu sehen. Wir können ein Entwicklungsserverpaket wie Luke Jacksons Servor einführen:

 NPM Installation Servor-Save-dev

Anschließend können wir die ESBUILD JavaScript -API verwenden, um als Server zu starten und gleichzeitig den Beobachtungsmodus von Esbuild auszuführen. Erstellen wir eine Datei am Stamm unseres Projekts namens watch.js:

 // Watch.js
const esbuild = fordern ("esbuild");
const servor = fordern ("dienst");

Esbuild.build ({{
  // hier alle Optionen übergeben, um es zu bauen ...
  Einstiegspunkte: ["src/app.jsx"],
  Outdir: "Dist",
  Definieren Sie: {"process.env.node_env": '"production"'},
  Uhr: wahr,
});

asynchronisierte Funktion serviert () {
  console.log ("Server aus: http: // localhost: 8080/");
  Warten Sie den Servor ({{
    // Weitere Optionen an den Servor hier übergeben ...
    Browser: wahr,
    Wurzel: "dist",
    Port: 8080,
  });
}

Aufschlag();

Führen Sie nun Node Watch.js in der Befehlszeile aus. Dies gibt uns einen schönen Entwicklerserver, aber es gibt uns keinen Ersatz oder eine schnelle Aktualisierung des Moduls (dh Ihr clientseitiger Status wird nicht erhalten). Aber das war genug für meine Testbedürfnisse.

Obwohl wir jedes Mal, wenn wir eine Datei speichern, unsere gesamte Anwendung zurücksetzen, müssen wir eine ziemlich massive Anwendung benötigen, bevor Esbuild langsamer wird. Nachdem ich dieses Werkzeug eingerichtet hatte, erhielt ich sofortiges Feedback von Änderungen. Mein Computer verwendet einen Intel i7 aus dem Jahr 2012, daher ist er sicherlich keine erstklassige Maschine.

Wenn Sie eine vorkonfigurierte Version von Esbuild mit Live -Reload und einigen React -Standards benötigen, können Sie dieses Repo klonen.

Unterstützte Dateien

Esbuild kann CSS in JavaScript importieren, wenn dies Ihr Stil ist. Es wird CSS in eine Ausgabedatei mit demselben Namen wie Ihre Hauptausgabe -JavaScript -Datei zusammengestellt. Es kann auch standardmäßig CSS @import -Anweisungen bündeln. Es gibt keine Unterstützung für CSS -Module, aber es gibt Pläne dafür.

Es gibt eine wachsende Gemeinschaft von Plugins für Esbuild. Beispielsweise stehen Plugins für VUE -Einzeldateikomponenten und Svelt -Komponenten zur Verfügung.

Esbuild arbeitet mit JSON -Dateien und kann sie ohne Konfiguration in JavaScript -Module bündeln.

Es kann auch Bilder in JavaScript importieren, mit der Option, sie entweder in Daten -URLs umzuwandeln oder sie in einen Ausgaberordner zu kopieren. Dieses Verhalten ist standardmäßig nicht aktiviert, aber Sie können Folgendes in Ihr ESBuild -Konfigurationsobjekt hinzufügen, um eine der beiden Optionen zu aktivieren:

 Loader: {'.png': 'dataurl'} // konvertiert in das JS -Bundle in Daten -URL
Loader: {'.png': 'Datei'} // Kopien zum Ausgaberordner

Die Code -Aufteilung scheint in Arbeit zu sein, befindet sich jedoch hauptsächlich im ESM -Ausgangsformat und sieht so aus, als ob es für das Projekt Priorität ist. Es ist auch erwähnenswert, dass Baumschütteln standardmäßig in Esbuild eingebaut ist und nicht ausgeschaltet werden kann.

Produktionsbau

Mit den Optionen "Minify" und "Bundle" in Ihrem Befehl "Esbuild" wird ein Bündel nicht so klein wie eine Rollup/Terser -Pipeline erstellen. Dies liegt daran, dass Esbuild eine Bündelgrößenoptimierung opfert, um Ihren Code in so wenigen Pässen wie möglich durchzuhalten. Der Unterschied kann jedoch ziemlich vernachlässigbar sein und es lohnt sich für die Erhöhung der Bündelungsgeschwindigkeit je nach Projekt. In meinem Klon der Snap Shot -Anwendung erstellte Esbuild ein Bündel von 177 kb, das nicht viel mehr als die von VITE produzierte 165 KB produziert wird, die Rollup und Terser verwendet.

Gesamt

Esbuild ist ein äußerst leistungsfähiges Werkzeug. Aber es könnte schwierig sein, wenn Sie an Null-Config-Setups gewöhnt sind. Wenn Sie mehr benötigen, möchten Sie sich vielleicht das nächste Werkzeug Snowpack ansehen, das esbuild verwendet.

Schneedecke

Snowpack ist ein Build -Werkzeug der Schöpfer von Skypack und Pika. Es bietet einen großartigen Entwicklungsserver und wurde mit einer „ungebundenen Entwicklungsphilosophie“ erstellt. Um die Dokumentation zu zitieren: „Sie sollten in der Lage sein, einen Bundler zu verwenden, weil Sie möchten, und nicht, weil Sie es brauchen.“

Standardmäßig bündet der Build -Schritt von Snowpack keine in ein einzelnes Paket, sondern bietet ungebundene Esmodules, die im Browser ausgeführt werden. Esbuild ist dort tatsächlich als Abhängigkeit enthalten, aber die Idee ist, JavaScript -Module zu verwenden und nur mit Esbuild zu bündeln, wenn es benötigt wird.

Snowpack verfügt über eine ziemlich schicke Dokumentation, einschließlich einer Liste von Leitfäden, um sie mit JavaScript -Frameworks und einer Reihe von Vorlagen für sie zu verwenden. Einige der Führer sind noch in Arbeit, aber andere mögen für React schön und klar. Es sieht auch so aus, als würde Snowpack Treats Selte als erstklassiger Bürger. Ich habe auf dem Sufelte Summit 2020 tatsächlich zum ersten Mal von Snowpack aus Rich Harris '"Futuristic Web Development" -Ver Talk gehört. Dass die bevorstehende SufleTe Meta-Framework-Sufels-Sveltekit sollte von Snowpack angetrieben werden, hat aber seitdem zu Vite umgestellt (was als nächstes überprüft wird).

Anwendungsfälle

Snowpack ist eine gute Wahl, wenn Sie einen ungebundenen Einsatz verdoppeln möchten. Möglicherweise schreiben Sie Quellcode mit einer kleinen Anzahl von Modulen. Dies würde bedeuten, dass Sie keinen großen Antragswasserfall mit einem ungebundenen Build schaffen. Wenn Sie nicht die zusätzliche Komplexität und technische Schulden der Bündelung benötigen, ist die Schneeverpackung eine gute Wahl. Ein guter Anwendungsfall wäre, wenn Sie schrittweise ein Front-End-Framework in eine servergerenderte oder statische Anwendung einnehmen. Sie würden so wenig Werkzeug wie möglich aus dem Knoten -Ökosystem einziehen, aber Sie würden trotzdem die Vorteile von deklarativen Frontend -Frameworks erhalten.

Zweitens würde ich argumentieren, dass Snowpack eine großartige Wrapper um Esbuild ist. Wenn Sie Esbuild ausprobieren möchten, aber auch einen Entwicklungsserver und vorgeschriebene Vorlagen für Front-End-Frameworks wünschen, können Sie mit Snowpack nichts falsch machen. Aktivieren Sie ESBuild im Build -Schritt Ihrer Schneeverpackungskonfiguration und Sie können loslegen.

Da die Dinge derzeit stehen, würde ich argumentieren, dass Snowpack nicht der beste Ersatz für ein Null-Konfiguration-Tool wie Create-React-App ist, da Sie Plugins einziehen und sie selbst konfigurieren müssen, wenn Sie eine große Anwendung haben und einen supergebundenen optimierten Produktionsbereitungsschritt benötigen.

Aufstellen

Beginnen wir ein Projekt mit Snowpack, indem wir in die Befehlszeile springen:

 Mkdir SnowpackProject
CD SnowpackProject
npm init #Fill mit Standardeinstellungen 
NPM Snowpack installieren

Fügen wir nun Folgendes zu package.json hinzu:

 // package.json
"Skripte": {{
  "Start": "Snowpack Dev",
  "Build": "Schneedecke Build"
},

Als nächstes erstellen wir eine Konfigurationsdatei:

 // Mac oder Linux
Berühren Sie Snowpack.config.js
// Windows
new-item snowpack.config.js

Ich denke, der magischste Teil der Schneeverpackung kommt, wenn ein unschuldig aussehendes Schlüsselwertpaar in der Konfigurationsdatei festgelegt wird. Fügen Sie dies zum Beispiel in die Konfigurationsdatei ein:

 // snowpack.config.js
module.exports = {
  Paketoptionen: {
    "Quelle": "Remote",
  }
};

Quelle: Remote ermöglicht etwas, das als Streaming -Importe bezeichnet wird. Durch Streaming -Importe können die Snowpack die NPM -Installation durch die Umwandlung bloßer Importe (z. B. Reaktionen von 'React') in CDN -Importe von SKYPACK umwandeln.

Lassen Sie uns eine Index.html -Datei erstellen:

 


<kopf>
  <meta charset="utf-8">>
  <title> Snowpack Streaming Importe </title>


  <div> </div>
  
  <script type="modul" src="app.js"> </script>

</kopf>

Das obige ist der detaillierte Inhalt vonVergleich der neuen Generation von Build -Tools. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!