Ein unvollständiger Leitfaden zur JavaScript-Toolchain

Überblick

Da die JavaScript-Sprache immer leistungsfähiger wird, boomt auch die Zahl der Entwicklungstools, die sie unterstützen. Bei heutigen Front-End-Webprojekten geht es nicht mehr nur darum, ein paar HTML-Seiten zu schreiben und etwas CSS und JS hinzuzufügen. Für jedes praktische Projekt kann die Verwendung einiger Frameworks und Bibliotheken von Drittanbietern sowie des entsprechenden Scaffoldings, der Verwaltung abhängiger Pakete, der Vorkompilierung, des Build-Packaging, der Komprimierung und Zusammenführung und anderer Tools erforderlich sein. Es ist fast unmöglich, diese Aufgaben rein manuell zu erledigen.

Wissenschaft und Technologie sind die primären Produktivkräfte und Werkzeuge sind eine ihrer Erscheinungsformen. Wenn Sie Ihre Arbeit gut machen wollen, müssen Sie zuerst Ihre Werkzeuge schärfen. Da Werkzeuge menschliche Arbeitskraft freisetzen, sollten wir sie nutzen. Dieser Artikel fasst eine Reihe von Tools rund um JavaScript zusammen und zeigt, welche Tools für ein gängiges Projekt benötigt werden.

Statische Typprüfung

JavaScript selbst ist eine dynamische Skriptsprache und schwach typisiert. Das heißt, dass zur Kompilierungszeit keine Datentypprüfung stattfindet und der Typ erst zur Laufzeit ermittelt werden kann. Die Vorteile sind, dass es flexibler und leichter zu erlernen ist und weniger Code erfordert. Der Nachteil liegt auch auf der Hand: Wenn Sie nicht aufpassen, können leicht Fehler auftreten, insbesondere bei großen Projekten. Wenn es keine Entwicklungsspezifikationen gibt und die Entwickler frei spielen können, wird die Wartung eine Katastrophe. Um dieses Manko auszugleichen, sind einige Sprachen mit eigenen Typsystemen entstanden, die in JavaScript übersetzt werden können.

Flow: Ein statisches Typprüfungssystem für JavaScript, geschrieben in OCaml, produziert von Facebook. Es unterstützt Typsysteme, Typanmerkungen, kann Bibliotheken definieren und bietet Code-Lint usw. Vue.js 2.x ist in Flow geschrieben. Vue 3.0 verwendet jedoch eine andere statisch typisierte Sprache, TypeScript.

TypeScript: TypeScript ist eine von Microsoft entwickelte Sprache, die eine Obermenge von JavaScript darstellt und in JavaScript kompiliert werden kann. TypeScript erfreut sich immer größerer Beliebtheit und wird von zahlreichen Projekten anerkannt.

Code-Stilprüfung (Linter)

Aufgrund der Eigenschaften der dynamischen Sprache JavaScript ist sie beim Schreiben zu flexibel, was in Projekten, an denen mehrere Personen zusammenarbeiten, häufig zu unterschiedlichen Codestilen führt und große Probleme bei der Wartung und Erweiterung verursacht. Darüber hinaus sind einige Sprachfunktionen fehleranfällig und werden in Best Practices im Allgemeinen nicht empfohlen. Daher sind Code-Linting-Tools praktisch. Es kann nicht nur das Format der Code-Schreibweise prüfen, sondern auch nach Fehlern auf niedriger Ebene suchen, wie etwa der Referenzierung undefinierter Variablen.

Es gab viele Arten von Lint-Tools, wie JSLint, JSHint, StandardJS, JSCS usw. Jetzt gibt es einen Trend zur Vereinheitlichung und im Grunde verwendet jeder ESLint.

Wenn Sie das Tool Lint zum ersten Mal verwenden, sind Sie möglicherweise nicht daran gewöhnt, da es zu viele Einschränkungen aufweist und häufig Warnungen und Fehler ausgibt. Auf lange Sicht ist es jedoch weiterhin notwendig, Linter in JavaScript-Projekte einzuführen.

Paket-Manager

Der Grund für den Erfolg von JavaScript liegt vor allem darin, dass das Technologie-Ökosystem sehr floriert und es alle möglichen Drittanbieter-Bibliotheken gibt. Für eine so große Sammlung von Drittanbieterbibliotheken ist zwangsläufig eine Verwaltungsplattform erforderlich, die für das Hosting, die Versionsverwaltung, den Download und die Installation sowie das Abhängigkeitsmanagement von Drittanbieterpaketen verantwortlich ist.

npm: Der beliebteste JavaScript-Paketmanager. Basierend auf Node.js, einschließlich Websites und CLI, übersteigt die Gesamtzahl der oben genannten Pakete 1 Million und deckt grundsätzlich alle Aspekte ab, die für JavaScript-Projekte erforderlich sind.

Yarn: Ein 2016 von Facebook eingeführter Paketmanager, der mit dem npm-Register kompatibel ist und den Schwerpunkt auf die Geschwindigkeit, Sicherheit und Determinismus der CLI legt.

Bower: Es war einst recht beliebt und wurde zum Verwalten von Front-End-JavaScript-Paketen verwendet, da npm nur die Paketverwaltung in der Node-Umgebung unterstützte. Da npm und yarn sowohl die Node- als auch die Browser-Paketverwaltung unterstützen, ist Bower allmählich in die Geschichte eingegangen.

pnpm: Über Hardlinks wird nur eine Kopie einer bestimmten Version eines Moduls auf der Festplatte gespeichert. Diese kann von mehreren Projekten gemeinsam genutzt werden, wodurch viel Festplattenspeicher gespart und die Modulinstallation beschleunigt wird.

Modullader

In den Anfangstagen von JavaScript gab es keine Unterstützung für die Modularisierung auf Sprachebene, was die Abhängigkeitsverwaltung bei großen Projekten sehr umständlich machte. Probleme wie Variablennamenkonflikte, globale Variablenverschmutzung und die Ladereihenfolge von Modulen treten stärker auf. Es gab verschiedene Modularisierungsschemata, wie CommonJS Modules (CJS), Asynchronous Module Definition (AMD) und Universal Module Definition (UMD). Seit 2015 unterstützt ES6 die Modularisierung auf Sprachebene, nämlich ECMAScript Modules (ESM).

Zusätzlich zu den oben genannten allgemeinen JavaScript-Modulformaten gibt es auch System.register oder globale Module sowie einige Nicht-JavaScript-Module wie JSON-Module, CSS-Module, Web Assembly usw.

Ein Modullader ist ein Tool, das die oben genannten verschiedenen Arten von Modulcodes lädt und verarbeitet, die synchron, asynchron, statisch oder dynamisch sein können. Normalerweise wird ein Modul in einer separaten Datei platziert und über einige Anweisungen importiert. Wenn ein Projekt Dutzende oder Hunderte von Modulen umfasst, kann die Sicherstellung der Reihenfolge, in der sie geladen und ausgeführt werden, zum Problem werden. Keine Sorge, der Modullader kümmert sich für Sie um die Abhängigkeiten.

RequireJS: implementiert das Laden von AMD-Modulen, wird hauptsächlich auf der Browserseite verwendet und kann auch in Node verwendet werden.

SystemJS: Ein dynamischer Modullader, der alle Arten von JavaScript-Modulen, auch Nicht-JavaScript-Module, für Browser und Node laden kann.

StealJS: Kann Module in den Formaten ESM, ADM und CJS laden.

ES-Modullader: Ein von Browsern implementierter Modullader, der in Node.js mit dem Flag --experimental-modules verfügbar ist.

Die oben genannten Modullader laden und führen Code zur Laufzeit aus. Verwechseln Sie es nicht mit den verschiedenen Loadern in den Build-Tools. Dabei handelt es sich um Tools, die zur Build-Zeit eine Vorverarbeitung durchführen und nur einige Formatkonvertierungen vornehmen.

Verpackungswerkzeuge

Bei einem tatsächlichen Produktionsprojekt wird der Quellcode normalerweise nicht direkt auf dem Server veröffentlicht. Stattdessen werden verschiedene Module und statische Ressourcen über einige Tools integriert und der endgültig generierte Code kann sich vollständig vom Quellcode unterscheiden. Dafür gibt es Verpackungswerkzeuge. Die gebräuchlichsten Verpackungstools sind:

Webpack: Man kann es als den beliebtesten Bundler bezeichnen und es ist für die meisten Projekte nahezu die Standardkonfiguration. Es kann nur JavaScript- und JSON-Dateien erkennen, aber sein architektonisches Design bietet unbegrenzte Möglichkeiten. Es kann jede Art von Ressourcen über verschiedene Loader verarbeiten und kann Verpackungsergebnisse optimieren und Ressourcenverwaltung durchführen, Umgebungsvariablen einfügen usw. über Plug-Ins. Die Build-Ziele können auch plattformabhängig angepasst werden, z. B. Browser, Node.js, Web Worker, Electron usw.

Rollup: Es ist auch ein hervorragender Packager, der die Ausgabe von Bibliotheken und Anwendungen unterstützt. Sein größtes Verkaufsargument ist, dass es standardmäßig ES-Module unterstützt und die Tree-Shaking-Funktion sehr früh implementiert hat. Es verfügt auch über Plug-In- und Hook-Funktionen und ist relativ anpassbar.

Parcel: Ein aufsteigender Stern in der Tool-Welt, bekannt als Bundler ohne Konfigurationsaufwand. Wenn Sie sich schon einmal über die umständliche Konfiguration von Webpack geärgert haben, könnte es Sie interessieren.

Browserify: Ein engerer Bundler, der speziell dafür entwickelt wurde, Node.js-Pakete so zu transformieren, dass sie in einem Browser ausgeführt werden können. Es verwendet dasselbe Modulsystem wie Node.js. Einige Module werden nur auf der Node-Plattform verwendet und können durch Konvertierung im Browser verwendet werden. Es kann nur reine JavaScript-Module verarbeiten und wird normalerweise in Verbindung mit Gulp verwendet.

Metro: Ein React Native-spezifischer Packager, der eine Einstiegsdatei und verschiedene Konfigurationen verwendet, um eine einzelne JavaScript-Datei zu erstellen, die den gesamten Code und alle Abhängigkeiten enthält.

Aufgabenverwaltungstool (Task Runner)

Task Runner automatisiert verschiedene wiederkehrende Aktionen, die für ein Projekt erforderlich sind, wie zum Beispiel:

• CSS-Präprozessoren (Less, Sass)
• CSS fügt automatisch neue Attributpräfixe hinzu (Autoprefixer)
• Bilder optimieren
• Kombinieren und komprimieren Sie JavaScript-Dateien
• Dateiänderungen überwachen und Aufgaben automatisch ausführen

Die bekannteren Task-Manager sind Grunt und Gulp, auch Webpack ist einer davon.

Grunt: Ein Befehlszeilentool, das durch ausgefeilte Konfiguration und umfangreiche Plug-Ins viele komplexe Aufgaben erledigen kann.

Gulp: Im Gegensatz zu Grunt verwendet Gulp eine Streaming-Pipeline, um mehrere Aufgaben zu kombinieren. Die temporären Ergebnisse zwischen den Aufgaben werden im Speicher gespeichert, was die Ausführungseffizienz deutlich erhöht.

Webpack: Du bist es wieder, Webpack. Die Aufgabenverwaltung ist nur ein Teil der leistungsstarken Funktionen von Webpack. Verschiedene Plug-Ins werden verwendet, um personalisierte Aufgaben in verschiedenen Phasen des Builds auszuführen.

Wenn Sie der Meinung sind, dass die oben genannten Task-Manager übertrieben sind, können Sie auch Bash-Skripte, NPM-Skripte oder Makefile verwenden, um je nach tatsächlicher Situation eine einfache Aufgabenverwaltung zu implementieren.

Übersetzer

Die Rolle eines JavaScript-Transpilers besteht darin, Nicht-JavaScript-Sprachen (TypeScript, CoffeeScript, LiveScript usw.) oder verschiedene Versionen von JavaScript (ES6, ES7, ES8 usw.) in gleichwertigen Code zu übersetzen, der die Anforderungen der Zielplattform erfüllt (Kompatibilität, Variablenverschleierung, strikter Modus usw.).

Die meisten Transpiler verwenden einen Abstract Syntax Tree (AST) als Zwischenformat bei der Verarbeitung von Quellcode und der Durchführung von Codeoptimierungen. AST teilt den Quellcode schrittweise auf und analysiert ihn in eine Baumstruktur mit Metadaten:

Code --(analysieren)-->AST--(transformieren)-->AST--(generieren)-->Code

Babel ist der derzeit gängige JavaScript-Transpiler. Sein Toolchain-System wird hauptsächlich verwendet, um JavaScript-Versionen über ES6 in Code zu übersetzen, der abwärtskompatibel mit Browsern ist. Babel kann Syntax konvertieren, Unterstützung für Funktionen bieten, die auf der Zielplattform fehlen, Quellcode konvertieren usw.

Mit Babel können wir neue Sprachfunktionen so früh wie möglich verwenden, ohne uns Gedanken darüber machen zu müssen, ob die Zielbrowser sie unterstützen.

Werkzeuge erstellen

Die Konstruktion ist eigentlich ein umfassendes Konzept, das mehrere Schritte wie Modulverpackung, Quellcodeübersetzung und Aufgabenverwaltung umfasst. Es gibt verschiedene Build-Tools für andere Sprachen und Plattformen, beispielsweise Make, Gradle, Ant, Maven, Rake oder MSBuild. Unter ihnen ist Make das am häufigsten verwendete Allzweck-Build-Tool, das normalerweise in der Sprache C verwendet wird, aber auch zum Erstellen von JavaScript-Projekten verwendet werden kann.

Bei einer JavaScript-Toolchain könnte das Build-Ziel ein NPM-Paket, eine Website, ein Node-Server, eine RN-App, eine Electron-App usw. sein. Einige Aufgaben können mit Spezialwerkzeugen erledigt werden, aber das Bauen ist ein komplexer Prozess, der oft die Verwendung einer Kombination mehrerer Werkzeuge erfordert.

Beispielsweise kann Build Tools wie Buck, Bazel, Lerna usw. verwenden, um mehrere Module gleichzeitig zu verwalten und einen inkrementellen Build zu implementieren (zur Verbesserung der Effizienz nur die geänderten Module neu erstellen). Grunt und Gulp werden für die Aufgabenverwaltung verwendet und Webpack, Rollup, Parcel, Browserify usw. werden für die Modulbündelung verwendet.

Debugging-Tools

Ein Debugger ist während des Entwicklungsprozesses unverzichtbar, da er Ihnen die Verfolgung und Anzeige von laufendem Code in Node.js und im Browser ermöglicht. Es bietet normalerweise Funktionen wie Haltepunkte, Einzelschrittausführung, Überwachungsvariablen und Anzeige der Speicher- und CPU-Auslastung.

Chrome DevTools: Die mit dem Chrome-Browser gelieferten Entwicklertools sind (ohne Zweifel) die besten derzeit verfügbaren Browser-Entwicklungstools. Seine Funktionen sind so leistungsstark und seine Einsatzmöglichkeiten so zahlreich, dass man ein Buch darüber schreiben könnte.

node-inspector: Ein frühes Tool zum Debuggen von Node.js-Code. Es wird jetzt kaum noch verwendet, da Node.js über einen integrierten Debugger auf Basis von DevTools verfügt.

VS Code: Ein weiteres großartiges Debugging-Tool mit integriertem Node.js-Debugger. Es kann auch TypeScript und andere Sprachen debuggen, die in JavaScript übersetzt werden können.

Knotenprozess-Manager

Der Node-Prozessmanager wird zum Verwalten laufender Node-Anwendungen verwendet. Bietet hohe Verfügbarkeit, automatischen Neustart, Dateiüberwachung, Leistungs- und Ressourcenüberwachung sowie Clustering-Funktionen.

Für immer: Wie der Name schon sagt, besteht die Funktion darin, das Node.js-Programm für immer am Laufen zu halten. Es ist ein einfaches Befehlszeilentool, das für kleine Node.js-Anwendungen praktisch ist.

PM2: Ein Node.js-Prozessmanagementtool für Produktionsumgebungen mit integriertem Lastenausgleich, automatischem Neustart, Protokollierungs-, Überwachungs- und Clusterverwaltungsfunktionen.

StrongLoop Process Manager (Strong-PM): Ähnlich wie PM2 kann es auch für das Node.js-Prozessmanagement in Produktionsumgebungen verwendet werden und verfügt über Multi-Host-Bereitstellungsfunktionen.

Darüber hinaus ist SystemD der Standard-Prozessmanager in Linux-Systemen, mit dem Node.js-Anwendungen als Dienste ausgeführt werden können.

Projektgerüst

Mit zunehmender Komplexität des Projekts werden die Schritte zum Erstellen eines neuen Projekts immer umständlicher und es müssen möglicherweise viele Konfigurationsarbeiten wiederholt werden. Zu diesem Zeitpunkt ist eine Projektunterstützung erforderlich. Viele Frameworks stellen Scaffolding-Tools bereit, beispielsweise hat Vue.js Vue CLI, Angular hat Angular CLI, React hat create-react-app usw. Es gibt auch Mehrzweckgerüste, wobei das Yeoman-Gerüst am beliebtesten ist.

• Schnell ein neues Projekt erstellen
• Erstellen eines Moduls oder Pakets
• Einen neuen Dienst starten
• Einheitlicher Codierstil, bewährte Methoden usw.
• Projektförderung, die Benutzern einen schnellen Einstieg in die Beispiel-App ermöglicht

Oben finden Sie eine kurze Erläuterung der Details des unvollständigen Leitfadens zur JavaScript-Toolchain. Weitere Informationen zum unvollständigen Leitfaden zur JS-Toolchain finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!