So machen Sie JS-Module nützlicher

Viele Leute haben die auf npm freigegebenen JavaScript-Module verwendet, aber manchmal wären die von ihnen verwendeten JavaScript-Module besser, wenn sie einfacher zu verwenden wären. Daher wird dieser Artikel aus der Sicht der Modulbenutzer zusammenfassen, wie das Modul nützlicher gemacht werden kann . nützlicher sein.

Zugang zu ES6-Modulen ermöglichen

Sowohl Webpack als auch Rollup unterstützen einige statische Optimierungen von ES6-Modulen (z. B. Tree Shaking und Scope Hoisting), und das werden sie auch take priorität Lesen Sie das Modulfeld in package.json als Eintrag des ES6-Moduls. Wenn kein Modul vorhanden ist, wird das Hauptfeld als Eintrag 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 dies erkennen, indem Sie prüfen, ob eine globale Variable mit dem Namen „window“ vorhanden ist (z. B. !). !typeof window ) Unabhängig davon, ob das Modul derzeit in Node.js oder im Browser ausgeführt wird, verwenden Sie verschiedene Möglichkeiten, um Ihre Funktionalität 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 den Vorschlag gemacht, 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 es in package.json deklarieren:

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

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

Bestücken Sie Ihr Projekt mit verschiedenen Diensten

Die meisten JavaScript-Projekte sind Open Source, und die Open-Source-Community bietet auch viele kostenlose Dienste für Open-Source-Projekte Hier sind einige häufig verwendete Hilfen für Ihr Projekt.

Der am häufigsten genutzte Dienst in einem Projekt ist die kontinuierliche Integration. Kontinuierliche Integrationsdienste können Aufgaben wie Tests, Codestilerkennung und Paketierung auf dem Server ablegen und 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 die Tests durchgeführt haben, können Sie die 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.

Obwohl die meisten der oben genannten Vorschläge das i-Tüpfelchen sind, werden sie Ihr Modul benutzerfreundlicher machen. Ich hoffe, dass die oben genannten Vorschläge Ihnen bei der Entwicklung Ihres eigenen Moduls helfen können.

Im obigen Inhalt geht es darum, wie man das js-Modul benutzerfreundlicher macht. Ich hoffe, es kann allen helfen.

Verwandte Empfehlungen:

Detaillierte Erläuterung der modularen JavaScript-Programmierung

Detaillierte Erläuterung der modularen JavaScript-Programmierung

Detaillierte Erläuterung der modularen JavaScript-Entwicklung

Das obige ist der detaillierte Inhalt vonSo machen Sie JS-Module nützlicher. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!