Optimierung des JavaScript-Moduls

Ich möchte Ihnen zeigen, wie Sie bessere JavaScript-Module und -Funktionen entwickeln können. Interessierte Freunde können daraus lernen.

Viele Leute haben ihre eigenen entwickelten JavaScript-Module auf npm veröffentlicht, und bei der Verwendung einiger Module denke ich oft: „Dieses Modul ist sehr nützlich, aber es wäre besser, wenn es xxx könnte“-Idee. Daher wird in diesem Artikel zusammengefasst, wie das Modul aus Sicht der Modulbenutzer nützlicher gemacht werden kann.

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 Kompilierungszeit 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 es in package.json deklarieren:

{
 "browser": {

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

Auf diese Weise, wenn Ihr Wann Das Modul wird im Verpackungstool verwendet. Das Verpackungstool fügt 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 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 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.

Das Obige ist der Text, den ich zusammengestellt habe, ich hoffe, er wird für alle hilfreich sein

Verwandte Artikel:

So installieren Sie Mint-UI in Vue

So konfigurieren Sie die React Native-Entwicklungsumgebung in VSCode

Beim Aufruf von fs.renameSync in Node.js tritt ein Fehler auf?

Verwenden Sie npm, um ein Vue-Projekt zu erstellen (ausführliches Tutorial)

So verwenden Sie fs.rename in node.js, um eine erzwungene Umbenennung zu implementieren

Jede Datenbank über Javascript verbinden

Im Ladepfad inlaydate.js ist ein Fehler aufgetreten

In vue – So implementieren Sie die Übergabe von Routenparametern im Router

Wie man mit jQuery eine Tabelle bedient, um eine Zellenzusammenführung zu erreichen

Wie man implementiert Datei-Upload in nodejs+express

So implementieren Sie eine Blog-Verwaltungsplattform in Vue+SpringBoot

So beheben Sie den überschrittenen maximalen Aufrufstapelfehler in nodejs

Es gibt Beispiele für asynchrone Komponenten in Vue

So implementieren Sie Zirkelverweise zwischen Komponenten in Vue.js

Das obige ist der detaillierte Inhalt vonOptimierung des JavaScript-Moduls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!