So entwickeln Sie optimale JS-Module

Dieses Mal zeige ich Ihnen, wie Sie das optimale JS-Modul entwickeln und welche Vorsichtsmaßnahmen für die Entwicklung des optimalen JS-Moduls gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Viele Leute haben ihre eigenen JavaScript-Module auf npm veröffentlicht. Bei der Verwendung einiger Module erhalte ich oft die Fehlermeldung „Dieses Modul ist sehr nützlich, aber es wäre.“ „Es wäre besser, wenn du xxx könntest“, dachte er. Daher wird in diesem Artikel zusammengefasst, wie das Modul aus Sicht der Modulbenutzer nützlicher gemacht werden kann.

Bietet Zugang zu ES6-Modulen

Sowohl Webpack als auch Rollup unterstützen einige statische Optimierungen für ES6-Module (z. B. Tree Shaking und Scope). Beim Hochziehen lesen sie zunächst das Modulfeld in package.json als Eingang zum ES6-Modul. Wenn kein Modul vorhanden ist, lesen sie es. Das Hauptfeld dient als Einstiegspunkt zum CommonJS-Modul. Der übliche Ansatz ist: Verwenden Sie die ES6-Syntax zum Schreiben des Quellcodes und verwenden Sie dann Modulpaketierungstools in Kombination mit Syntaxkonvertierungstools zum Generieren CommonJS-Module und ES6-Module, sodass sowohl Haupt- als auch Modulfelder 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 zu vermeiden Kompilierungsfehler; dies ist auch nicht nur für TypeScript-Benutzer benutzerfreundlich, da dies von den meisten Code-Editoren (Webstorm, VS Code usw.) erkannt wird Die Typdeklarationen von TypeScript können präzisere Codehinweise liefern und Benutzer auffordern, wenn sie die falsche Anzahl oder den falschen Parametertyp übergeben. Die beste Vorgehensweise ist die Verwendung von TypeScript Schreiben Sie Ihr Modul und Typdeklarationen werden automatisch zur Kompilierzeit generiert. Darüber hinaus können Sie eine Deklarationsdatei auch manuell pflegen, indem Sie auf die Dokumentation zurückgreifen. Sie können index.d.ts in Ihrem Modulstammverzeichnis hinzufügen Datei oder deklarieren Sie das Typisierungsfeld in package.json, um den Speicherort der Deklarationsdatei anzugeben.

Lassen Sie das Modul gleichzeitig in

Node.js

und im Browser laufen Sie können feststellen, ob das Modul derzeit in Node.js oder einem Browser ausgeführt wird, indem Sie erkennen, ob eine globale Variable mit dem Namen „window“ (z. B. !!typeof window) vorhanden ist, und dann Ihre Funktionalität auf unterschiedliche Weise implementieren.

Diese Methode ist relativ häufig, aber wenn der Benutzer ein Modulpaketierungstool verwendet, führt dies zu Node.js Die Browser-Implementierung wird in die endgültige Ausgabedatei eingefügt. Als Reaktion auf dieses Problem schlug die Open-Source-Community vor, einen Browser zu package.json hinzuzufügen Feldvorschlag, 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. Beachten Sie jedoch, dass das Paketierungstool der Verwendung des im Browserfeld angegebenen Dateipfads, also Ihres Moduls, Vorrang einräumt Das Feld wird ignoriert. Dies führt dazu, dass das Paketierungstool Ihren Code nicht optimiert. Weitere Informationen finden Sie in dieser Frage.

Wenn Sie nur einen Teil der 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 http in Node.js Das Modul initiiert die Anfrage und ein anderes implementiert die gleiche Funktionalität mithilfe von XMLHTTPRequest im Browser. Um die entsprechenden Dateien verwenden zu können, sollte Ihr Modulcode immer vorhanden sein

require

(‘./path/to/http.js’) und in package.json deklarieren:

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.

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

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 an, die Ihr Projekt leistungsfähiger machen können. Hier sind einige der am häufigsten verwendeten Dienste.

Der am häufigsten genutzte Dienst in einem Projekt ist die kontinuierliche Integration. Der kontinuierliche Integrationsdienst kann Aufgaben wie Tests, Codestilerkennung und Paketierung auf dem Server ablegen und diese automatisch ausführen, wenn Sie den Code übermitteln. Zu den häufig verwendeten gehören Travis CI, CircleCI und AppVeyor. Travis CI ist für Open-Source-Projekte kostenlos und für Linux und OS X verfügbar Laufumgebung; CircleCI ist sowohl für Open-Source- als auch für private Projekte kostenlos, hat jedoch eine Laufzeitbeschränkung von 1500 Minuten pro Monat; Die Betriebsumgebung ist auch für Open-Source-Projekte kostenlos.

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

Wenn Sie möchten, dass Ihre Module unter verschiedenen Versionen verschiedener Browser und Plattformen vollständig getestet werden, können Sie auch Sauce Labs und BrowserStack verwenden. Beide sind für Open-Source-Projekte kostenlos, Sie müssen sich jedoch per E-Mail bewerben.

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, Status des bestandenen Tests, Testabdeckung, Dateigröße, ob Abhängigkeiten abgelaufen sind usw.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Schritte zur Implementierung der Entwicklung mehrseitiger Websites mit Webpack+Express

Zusammenfassung der Verwendung des Webpack-Frameworks

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