Beispiele zur Erläuterung der Entwicklung besserer JavaScript-Module

Viele Leute haben ihre eigenen entwickelten JavaScript-Module auf npm veröffentlicht. Bei der Verwendung einiger Module kommt mir oft die Idee: „Dieses Modul ist sehr nützlich, aber es wäre besser, wenn es xxx verwenden könnte.“ Daher wird in diesem Artikel zusammengefasst, wie das Modul aus Sicht der Modulbenutzer nützlicher gemacht werden kann. In diesem Artikel erfahren Sie hauptsächlich, wie Sie bessere JavaScript-Module und -Funktionen entwickeln können.

Bereitstellung des Zugangs zu ES6-Modulen

Sowohl Webpack als auch Rollup unterstützen einige statische Optimierungen von ES6-Modulen (z. B. Tree Shaking und Scope Hoisting), und sie werden das lesen Paket zuerst Das Modulfeld in .json dient als Einstiegspunkt des ES6-Moduls. Wenn kein Modul vorhanden ist, wird das Hauptfeld als Einstiegspunkt des CommonJS-Moduls gelesen. Der übliche Ansatz besteht darin, den Quellcode mit ES6-Syntax zu schreiben und dann das Modulverpackungstool in Kombination mit dem Syntaxkonvertierungstool zu verwenden, um CommonJS-Module und ES6-Module zu generieren, sodass die Haupt- und Modulfelder gleichzeitig bereitgestellt werden können.

Stellen Sie TypeScript-Typdeklarationsdateien bereit

Wenn Ihre Benutzer TypeScript verwenden, Ihr Modul jedoch keine Deklarationsdatei bereitstellt, müssen sie dem Projekt einen Code hinzufügen Um TypeScript-Kompilierungsfehler zu vermeiden, ist dies nicht nur für Benutzer, die TypeScript verwenden, benutzerfreundlich, da die meisten Code-Editoren (Webstorm, VS Code usw.) TypeScript-Typdeklarationen erkennen und entsprechend genauere Code-Tipps bereitstellen können Wenn der Benutzer die falsche Anzahl oder den falschen Parametertyp eingibt, wird eine Eingabeaufforderung angezeigt.

Am besten schreiben Sie Ihr Modul in TypeScript, das zur Kompilierzeit automatisch Typdeklarationen generiert. Darüber hinaus können Sie eine Deklarationsdatei auch manuell pflegen, indem Sie auf die Dokumentation zurückgreifen. Sie können eine index.d.ts-Datei im Stammverzeichnis Ihres Moduls hinzufügen oder den Speicherort der Deklarationsdatei im Typisierungsfeld in package.json angeben.

Lassen Sie das Modul gleichzeitig in Node.js und im Browser laufen

Sie können feststellen, ob das Modul derzeit in Node ausgeführt wird, indem Sie prüfen, ob eine globale Variable mit dem Namen „window“ vorhanden ist (z als !!typeof window) .js oder im Browser und verwenden Sie dann verschiedene Möglichkeiten, um Ihre Funktionen zu implementieren.

Diese Methode ist relativ häufig, aber wenn der Benutzer ein Modulpaketierungstool verwendet, führt dies dazu, dass sowohl Node.js- als auch Browser-Implementierungen in die endgültige Ausgabedatei einbezogen werden. Als Reaktion auf dieses Problem hat die Open-Source-Community vorgeschlagen, das Browser-Feld in package.json hinzuzufügen. Derzeit unterstützen sowohl Webpack als auch Rollup dieses Feld bereits.

Das Browserfeld kann auf zwei Arten verwendet werden:

Geben Sie bei Verwendung auf der Browserseite einen Dateipfad zum Browserfeld als Moduleintrag an, dies sollte jedoch der Fall sein Beachten Sie, dass das Verpackungstool der Verwendung des im Browserfeld angegebenen Dateipfads als Moduleintrag Vorrang einräumt. Daher wird Ihr Modulfeld ignoriert, was dazu führt, dass das Verpackungstool Ihren Code nicht optimiert. Weitere Informationen finden Sie in dieser Frage.

Wenn Sie nur einige dieser Dateien ersetzen möchten, können Sie ein Objekt deklarieren.

Angenommen, Sie haben zwei Dateien in Ihrem Modul: http.js und xhr.js. Die erste Datei verwendet das http-Modul in Node.js, um eine Anfrage zu initiieren, und die andere verwendet das http-Modul in Der Browser implementiert die gleiche Funktionalität. Um die entsprechende Datei zu verwenden, sollten Sie in Ihrem Modulcode immer require('./path/to/http.js') verwenden und diese in package.json deklarieren:

{
 "browser": {

  "./path/to/http.js": "./path/to/xhr.js"
 }
}

Wenn Ihr Modul im Verpackungstool verwendet wird, fügt das Verpackungstool auf diese Weise nur den Code von xhr.js in die endgültige Ausgabedatei ein.

Rüsten Sie Ihr Projekt mit verschiedenen Diensten aus

Die meisten JavaScript-Projekte sind Open Source, und die Open-Source-Community bietet auch viele kostenlose Dienste für Open-Source-Projekte, die Ihrem Projekt eine leistungsfähigere Hilfe bieten können , hier sind einige der am häufigsten verwendeten.

Der am häufigsten genutzte Dienst in einem Projekt ist die kontinuierliche Integration. Kontinuierliche Integrationsdienste können Tests, Codestilerkennung, Paketierung und andere Aufgaben auf dem Server platzieren und diese automatisch ausführen, wenn Sie den Code übermitteln. Zu den häufig verwendeten Diensten gehören Travis CI, CircleCI und AppVeyor. Travis CI ist für Open-Source-Projekte kostenlos und bietet Linux und OS

Nachdem Sie Ihre Tests durchgeführt haben, können Sie Ihre Testabdeckung auch auf Overalls hochladen. Mit diesem Dienst können Sie die Testabdeckung Ihres Codes online durchsuchen.

Wenn Sie möchten, dass Ihr Modul unter verschiedenen Browser- und Plattformversionen vollständig getestet wird, können Sie auch Sauce Labs und BrowserStack verwenden. Beide sind für Open-Source-Projekte kostenlos, müssen jedoch veröffentlicht werden E-Mail.

Schließlich bietet Shields IO eine Vielzahl von Symbolen, die viele zusätzliche Informationen zu Ihrem Projekt bereitstellen können, einschließlich, aber nicht beschränkt auf, NPM-Versionsnummer, Download-Volumen, Testdurchlaufstatus, Testabdeckung, Dateigröße usw die Abhängigkeit ist abgelaufen usw.

Verwandte Empfehlungen:

Analyse der Lademethoden für JavaScript-Module

Detaillierte Erläuterung der modularen JavaScript-Programmierung

JavaScript modulare Entwicklungsbibliothek SeaJS

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung der Entwicklung besserer JavaScript-Module. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!