Was sind die Web-Frontend-Paketierungstools?

Web-Front-End-Paketierungstools umfassen: 1. Webpack, ein modulares Verwaltungs- und Paketierungstool, das Dateien aus verschiedenen Modulen packen und integrieren und sicherstellen kann, dass die Referenzen zwischen ihnen korrekt sind und die Ausführung ordnungsgemäß erfolgt. Grunt, ein Front-End-Paketierungs- und Erstellungstool; 4. Rollup, modulares ES6-Paketierungstool; 6. EquireJS, Is ein JS-Datei- und Modullader.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Dell G3-Computer.

Web-Front-End-Paketierungstool

1. Webpack: Es ist ein modulares Verwaltungs- und Paketierungstool. Sein Zweck besteht darin, alle statischen Ressourcen zu packen. Sie können Dateien aus verschiedenen Modulen verpacken und integrieren und sicherstellen, dass die Verweise zwischen ihnen korrekt sind und die Ausführung ordnungsgemäß erfolgt. Wenn Webpack Ihre Anwendung verarbeitet, erstellt es intern ein Abhängigkeitsdiagramm, ordnet alle für das Projekt erforderlichen Module zu und generiert ein oder mehrere Bundles.

Durch die Loader-Konvertierung kann jede Form von Ressource als Modul betrachtet werden, z. B. CommonJs-Module, AMD-Module, ES6-Module, CSS, Bilder usw. Es kann viele lose Module in Front-End-Ressourcen packen, die gemäß Abhängigkeiten und Regeln für die Bereitstellung in der Produktionsumgebung geeignet sind. Sie können den Code von Modulen, die bei Bedarf geladen werden, auch trennen und sie asynchron laden, wenn sie tatsächlich benötigt werden. Es ist als Modulpaketierer positioniert, während Gulp/Grunt ein Build-Tool ist. Webpack kann einige Funktionen von Gulp/Grunt ersetzen, ist jedoch kein funktionales Tool und kann in Verbindung damit verwendet werden.

Webpack unterstützt alle gängigen Moduloptionen und ist zum Synonym für React-Entwicklung geworden. Obwohl Webpack behauptet, ein Modul-Bundler zu sein, kann es bereits als universeller Task-Runner verwendet werden.

2. Grunt: Das älteste Verpackungstool verwendet die Idee der Konfiguration, um Verpackungsskripte zu schreiben, sodass es mehr Konfigurationselemente wie Option, Quelle, Ziel usw. gibt . Darüber hinaus verfügen verschiedene Plug-Ins möglicherweise über eigene Erweiterungsfelder, was einen hohen kognitiven Aufwand erfordert. Bei der Verwendung müssen Sie die Konfigurationsregeln verschiedener Plug-Ins verstehen.

3. Gulp

Gulp: Verwenden Sie Code zum Schreiben von Verpackungsskripten, und der Code ist im Flow-Stil geschrieben. Er abstrahiert nur die Schnittstellen gulp.src, gulp.pipe, gulp.watch Die Anwendung ist ganz einfach. Es ist einfacher zu erlernen und zu verwenden, und die Codemenge kann mit gulp im Vergleich zu grunt um etwa die Hälfte reduziert werden. (PS: Diese Einführung ist für gulp3 und nicht in gulp4 verfügbar)

4. Rollup: Die nächste Generation modularer ES6-Tools ist die Verwendung von ES6-Moduldesign und Tree-Shaking zum Generieren einfacher und effizienter Einfacher Code. Im Allgemeinen verwenden Sie Webpack für Anwendungen und Rollup für Klassenbibliotheken. Verwenden Sie Webpack, wenn eine Codeaufteilung (Code-Splitting) erforderlich ist oder viele statische Ressourcen verarbeitet werden müssen oder wenn das erstellte Projekt viele CommonJS-Modulabhängigkeiten einführen muss. Die Codebasis basiert auf ES6-Modulen, und ich möchte, dass der Code mithilfe von Rollup direkt von anderen verwendet werden kann.

5. Parcel

Parcel ist ein „extrem schneller, konfigurationsfreier Webanwendungspaketierer“. In der Web-Front-End-Schulung werden, unabhängig davon, ob es sich um theoretisches Wissen oder praktische Projektabläufe handelt, Kenntnisse über Modulpaketierungstools vermittelt, sodass Sie den Umgang mit Front-End-Tools wirklich erlernen können.

Parcel verfügt über die folgenden Funktionen:

Schnell

Bündelt alle Assets des Projekts

• Keine Codeaufteilung konfiguriert

• 6. browserify

• . Browserify unterstützt Node.js bei der Verwendung von CommonJS Modul, das alle Module in einer einzigen browserkompatiblen Datei kompiliert. Es basiert auf der Flow-Idee und kann über die Befehlszeile oder API verwendet werden. Es befasst sich nur mit dem umgekehrten Prozess der JavaScript-Modularisierung, fördert jedoch eine bessere Entwicklung der Modularisierung.

7. RequireJS

RequireJS ist ein JavaScript-Datei- und Modullader. Es ist für die Verwendung im Browser optimiert, kann aber auch in anderen JavaScript-Umgebungen wie Rhino und Node verwendet werden. Die Verwendung eines modularen Skript-Loaders wie RequireJS verbessert die Geschwindigkeit und Qualität Ihres Codes.

Die Beherrschung der Verwendung dieser modularen Front-End-Tools wird Ihre Arbeit einfacher und effektiver machen. Modularisierung ist zu einer wesentlichen Fähigkeit für moderne Front-End-Ingenieure geworden.

(Lernvideo-Sharing:

Web-Frontend)

Das obige ist der detaillierte Inhalt vonWas sind die Web-Frontend-Paketierungstools?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!