Modular JavaScript: Ein Anfängerhandbuch zu SystemJS & JSPM

Key Takeaways

• SystemJs und JSPM sind Tools, mit denen die Einschränkungen der JavaScript -Modularität überwunden werden können. SystemJS ist ein Modullader, mit dem Module in jedem beliebten Format zur Laufzeit importiert werden können, während JSPM ein Paketmanager ist, der auf SystemJs aufgebaut ist. Zusammen verwalten sie Pakete und ihre Abhängigkeiten und ermöglichen eine einfachere Installation und das Laden von Abhängigkeiten.
• Der Prozess der Einrichtung eines Projekts mit JSPM und SystemJS umfasst das Erstellen eines Verzeichnisses, die Initialisierung eines NPM -Projekts und die Installation von JSPM lokal. Nach der Einrichtung können JSPM und SystemJs zum Installieren und Verwalten von Paketen aus verschiedenen Quellen verwendet werden, ES6 -Code transpilieren und Abhängigkeiten verarbeiten.
• JSPM dient auch als Modul -Bundler, wobei alle Dateien und Bibliotheken in einer einzelnen Datei kombiniert und die von den Dateien verwendeten Modulsysteme in SystemJS -Stilmodule konvertiert werden. Dieser Prozess ist für die Leistung von Vorteil und sollte in Produktionsanwendungen verwendet werden.

Dieser Artikel wurde von Adrian Sandu und Mark Brown Peer überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, die SitePoint -Inhalte so gut wie möglich gemacht haben!

In den letzten Jahren ist die JavaScript -Programmiersprache immer beliebter explodiert. Es ist zur Entwicklung sowohl reichhaltiger Webanwendungen als auch hybriden mobilen Anwendungen geworden. Und da JavaScript -Projekte immer komplexer werden, erleben Entwickler neue Anforderungen an die Sprache. Eine davon ist Modularität.

Soweit ich sehen kann, gibt es zwei Aspekte, in denen Modularität erreicht werden muss:

• Module, die wir
verzeichnen
• externe Module, die als Abhängigkeiten installiert sind

ES6 bringt eine Standardmodulsyntax in JavaScript und eine Laderspezifikation. Dies ist ein guter Schritt nach vorne, aber zum Zeitpunkt des Schreibens gibt es keinen Browser, der die ES6 -Module nativ laden kann. Dies bedeutet, dass Sie einen Modul -Bundler verwenden müssen, wenn Sie Module heute verwenden möchten.

Für einen Überblick über die aktuelle Landschaft siehe: Verständnis von JavaScript -Modulen: Bündelung & Transporation

und darüber hinaus haben wir keinen Paketmanager, mit dem wir ein Paket herunterladen und in unsere Anwendung einbeziehen können. Paketmanager (wie Bower und NPM) helfen uns, Front-End-Abhängigkeiten herunterzuladen, ohne die Website einer Projekte besuchen zu müssen, aber das ist so weit wie möglich.

In diesem Artikel werden wir sehen, wie JSPM und SystemJs verwendet werden können, um diese Probleme zu überwinden.

Was sind JSPM und SystemJs?

Der JavaScript -Paketmanager (auch bekannt als JSPM) ist ein Paketmanager, der über dem SystemJS Universal Modul Loader arbeitet. Es ist kein völlig neuer Paketmanager mit eigenen Regeln, sondern arbeitet neben vorhandenen Paketquellen. Aus der Schachtel funktioniert es mit Github und NPM. Da die meisten Pakete auf Bower -basierten Paketen auf GitHub basieren, können wir auch die Pakete mit JSPM installieren. Es verfügt über eine Registrierung, in der die meisten der häufig verwendeten Front-End-Pakete für eine einfachere Installation aufgeführt sind. Wie NPM kann es verwendet werden, um die Pakete als Entwicklung und Produktionspakete während der Installation zu unterscheiden.

SystemJS ist ein Modullader, der Module zur Laufzeit in einem der heute verwendeten beliebten Formate (CommonJS, UMD, AMD, ES6) importieren kann. Es ist auf dem ES6 -Modullader -Polyfill aufgebaut und ist klug genug, um das verwendete Format zu erkennen und angemessen zu handhaben. SystemJs können auch den ES6 -Code (mit Babel oder Traceur) oder anderen Sprachen wie TypeScript und Coffeescript mit Plugins transpilieren. Sie konfigurieren diese Dinge in System.config ({...}), bevor Sie Ihr Modul importieren.

JSPM verwendet SystemJs, um Pakete und ihre Abhängigkeiten zu verwalten. Daher müssen wir uns keine Sorgen machen, die Pakete in die richtige Reihenfolge zu setzen, um sie zu laden.

Jetzt, da wir wissen, was JSPM und SystemJs sind, lassen Sie uns sehen, wie sie sie verwenden.

Einrichten unserer Umgebung

Wenn Sie es noch nicht getan haben, müssen Sie Node.js installieren lassen. Eine besonders einfache Möglichkeit, dies zu tun, besteht darin, einen Versionsmanager (z. B. NVM) zu verwenden, und ist in diesem schnellen Tipp detailliert. Sobald Sie mit Knoten in Betrieb sind, können Sie JSPM global installieren, indem Sie Folgendes aus der Befehlszeile ausführen:

<span>npm install -g jspm
</span>

Jetzt können wir die JSPM -Befehlszeilenschnittstelle verwenden. Lassen Sie uns ein Projekt einrichten:

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

Dies erstellt ein Verzeichnis mit dem Namen New-Project, initialisiert ein NPM-Projekt und installiert JSPM lokal. Dies ist die empfohlene Art, Dinge zu tun, da es die JSPM -Version für ein Projekt abschließt und sicherstellt, dass Upgrades auf das globale JSPM das Verhalten Ihrer Anwendung nicht verändern.

Ein weiterer Vorteil dieses Ansatzes besteht darin, dass Sie den Build -Prozess so konfigurieren können, dass Ihr Projekt über einen kontinuierlichen Integrationsaufbau bereitgestellt wird, um das lokale JSPM -Paket zu verwenden, anstatt JSPM auch global auf dem Server zu installieren.

Sie können JSPM -v verwenden, um die lokale Version zu bestätigen.

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

Führen Sie den folgenden Befehl aus:

, um JSPM in einem Projekt zu verwenden:

jspm init

Sie werden für eine Reihe von Einstellungen aufgefordert. Drücken Sie die Eingabetaste, um die Standardwerte zu akzeptieren, oder geben Sie einen anderen Wert ein, um sie zu ändern. Der folgende Screenshot zeigt eine Instanz an, wenn der Befehl mit Standardeinstellungen ausgeführt wird:

Verzeichnisstruktur und Konfiguration

Dies erstellt eine Datei mit dem Namen config.js im Stamm des Projekts sowie einen Ordner namens JSPM_Packages. Wenn Sie einen Blick in den Ordner jspm_packages werfen, sehen Sie:

• a GitHub Sub-Directory
• ANPM SUBDRAURECTORY
• Die Hauptdateien für das SystemJS Modul Loader

Der Grund, warum JSPM Github- und NPM -Verzeichnisse erstellt, besteht darin, dass es sich über diese Registrien enthält und einfach das angeforderte NPM- oder Github -Paket mit Alia angeht. Darüber hinaus enthält das GitHub-Verzeichnis ein SystemJS-Plugin zum Laden von JSON-Dateien aus GitHub und das NPM-Verzeichnis enthält die Babel-bezogenen Pakete, die wir für den Transpilieren unseres ES6-Code

transportieren müssen

Die Datei config.js ist hauptsächlich für Systemjs. Wenn Sie es öffnen, werden Sie feststellen, dass es Konfigurationsoptionen für die Pfade der Pakete aus verschiedenen Quellen, Optionen für Babel und Namenskarten für die Pakete enthält, um sie einfach zu verweisen. Diese Datei wird automatisch aktualisiert, wenn ein neues Paket mit JSPM installiert wird.

Der Befehl aktualisiert auch die Package.json -Datei und fügt einen Abschnitt für JSPM hinzu. Die mit dem Init -Befehl installierten Babel -Pakete werden dem Abschnitt DevDependencies des Projekts hinzugefügt.

<span>npm install -g jspm
</span>

Jedes neue Paket, das mit dem Befehl JSPM mit oder ohne die Option "Save -Save" installiert ist, wird dem Abschnitt der Abhängigkeiten hinzugefügt und wird daher zu einer Produktionsabhängigkeit. Durch die Installation mit der Option--Save-Dev wird die Abhängigkeit zu einer Entwicklungszeitabhängigkeit und speichert sie dem Abschnitt DevDependencies.

Schließlich fügt JSPM für jedes mit dem Befehl JSPM installierte Paket einen Eintrag zum Kartenabschnitt der Datei config.js hinzu. Der zugeordnete Name kann verwendet werden, um die Bibliothek während Ihres Projekts in jeder JavaScript -Datei zu laden. Auch alle Paketabhängigkeiten werden dem Kartenabschnitt hinzugefügt. Im Folgenden finden Sie ein Fragment aus dem Kartenabschnitt der Datei config.js, die zeigt, wie Pakete von JQuery und JQuery-UI zugeordnet sind und wie die Abhängigkeit definiert wird:

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

Als Punkt des Interesses können Sie diese Zuordnungen auch automatisch generieren, wenn Sie ein Modul installieren:

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

Auf diese Weise können Sie Folgendes an anderer Stelle in Ihrer App schreiben:

jspm init

JSPM und SystemJs in Aktion

Um diesen Artikel zu begleiten, habe ich eine einfache Wikipedia -Suchprobe erstellt. Hier finden Sie das Github -Repo. Es wird die Standardoptionen des JSPM -Init -Befehls eingerichtet und verwendet folglich Babel als ES6 -Transpiler. Es verwendet auch die Bibliotheken JQuery und Bootstrap, die mit JSPM installiert sind. Da Bootstrap JQuery benötigt, erstellt JSPM eine Zuordnung in der Datei config.js, um jQuery vor dem Laden von Bootstrap zu laden:

<span>npm install -g jspm
</span>

Wie der Name des Repo vorschlägt, wird die Wikipedia -Such -API und die in der Ansicht empfangenen Daten angezeigt. Es verwendet Jquerys $ .ajax (), um einen Anruf bei der API zu tätigen, die Ergebnisse auf einer Seite anzuzeigen und einen Link zum Anzeigen eines Ausschnitts des Artikels in einem modalen Popup. Das Beispiel enthält drei JavaScript -Dateien unter dem Ordner Skripts:

• such.js: Diese Datei verwendet ein AMD -Stilmodul. Es lädt JQuery als Abhängigkeit und macht einen Ajax -Aufruf zur Wikipedia -Such -API. Das Modul gibt eine Funktion zurück, die jedes andere Verbrauchsmodul mit einem Parameter aufrufen kann.
• summaryModal.js: Diese Datei verwendet ein ES6 -Stilmodul. Es lädt die JavaScript -Bibliothek von Bootstrap. Anschließend wird eine Funktion exportiert, die ein Stück entkommene HTML akzeptiert und den HTML -Text enthält, bevor er ihn in einem modalen Popup anzeigt.
• display.js: Diese Datei verwendet ein CommonJS -Stilmodul. Es lädt JQuery und beide oben genannten Dateien als Abhängigkeiten. Es ruft die von Search.js aufgedeckte Methode auf, um Ergebnisse zu erzielen, und rendert diese Daten dann in einer HTML -Tabelle auf der Benutzeroberfläche. Darüber hinaus wird die von SummaryModal.js ausgesetzte Methode verwendet, um ein Modal anzuzeigen, um eine Linkschaltfläche in der Tabelle zu klicken.

Wie bereits erwähnt, versteht SystemJS alle Modulsysteme in JavaScript. Wir können alle drei oben genannten Dateien mit SystemJs laden.

Um diese Skripte ausgeführt zu haben, müssen wir System.js und config.js auf der HTML -Seite laden. Danach laden wir die Datei display.js mit dem SystemJS -Modulloader. Da sich diese Datei auf andere Dateien im Repo bezieht und diese Dateien die benötigten Bibliotheken laden, müssen wir keine andere Datei laden.

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

SystemJs transportiert die ES6 -Datei mit Babel und führt sie im Browser aus. Hier ist eine (leicht vereinfachte) Demo dessen, wie dies aussieht:

Die Transporation in der Fliege ist jedoch schlecht für die Leistung und sollte nicht in Produktionsanwendungen verwendet werden. Vergessen Sie nicht, dass JSPM ein Modul -Bundler ist. Lassen Sie uns ihn also bündeln.

Bündelung

Wir können ein Bundle für die gesamte Anwendung mit dem folgenden Befehl erstellen:

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

Dieser Befehl macht Folgendes:

• kombiniert alle Dateien und Bibliotheken in einer einzelnen Datei namens Build.js
• konvertiert die von den Dateien verwendeten Modulsysteme in SystemJS -Stilmodule
• Erstellt eine Quellkarte -Datei, die während des Debuggens
geladen wird

Jetzt müssen wir die Datei "Build.js" in die Index.html -Datei laden. Hier ist der aktualisierte Satz von Referenzen:

jspm init

Bitte beachten Sie, dass wir die Import -Anweisung nicht entfernen, um das Modul Display.js zu laden. Diese Anweisung lädt keine Datei mehr, sondern lädt ein SystemJS -Modul, das bereits in der Datei Build.js verfügbar ist.

Sie können Anweisungen in der Readme -Datei des Projekts befolgen, um sie auszuführen. Sie können den Code in den einzelnen Dateien in den Entwickler -Tools durchsuchen und diese durchführen.

Schlussfolgerung

Die Kombination von JSPM und SystemJS bietet eine einheitliche Möglichkeit zum Installieren und Laden von Abhängigkeiten. Dieses Tool erleichtert nicht nur die Verwaltung von Abhängigkeiten, sondern öffnet auch die Tür, um das zukünftige Modulsystem für die heutigen Browser zu verwenden. Wie ich gezeigt habe, ist JSPM einfach eingerichtet und benutzt, zwei Gründe, die zu seiner steigenden Popularität beitragen.

Verwenden Sie JSPM in Ihren Projekten? Warum? Warum nicht? Lassen Sie mich in den Kommentaren unten wissen.

häufig gestellte Fragen (FAQs) zu modularem JavaScript, SystemJS und JSPM

Was sind die wichtigsten Unterschiede zwischen SystemJs und Webpack? SystemJS ist ein universeller dynamischer Modullader, der ES6 -Module, AMD, CommonJs und globale Skripte im Browser und im NodeJS lädt. Es ist eher ein Modullader als ein Bundler. Auf der anderen Seite ist WebPack ein statischer Modul -Bundler für moderne JavaScript -Anwendungen. Es erstellt ein Abhängigkeitsdiagramm, das jedes Modul enthält, das Ihre Anwendungsanforderungen enthält, und sie in einen oder mehrere Bündel einpackt.

Wie kann ich SystemJs installieren? Sie können den folgenden Befehl verwenden, um es zu installieren: NPM Installation SystemJs. Nach der Installation können Sie es mit dem Import {System} aus 'SystemJs' in Ihr Projekt importieren. Paketmanager für SystemJS. Es vereinfacht den Prozess der Installation und Verwaltung von Paketen. Es bietet auch eine einheitliche Möglichkeit, Pakete von NPM, GitHub und anderen Quellen zu installieren. JSPM kann auch Transpilation verarbeiten, sodass Sie Code in ES6 oder TypeScript schreiben und automatisch in ES5 transpilieren lassen. Sie können die Methode von System.import () verwenden. Diese Methode gibt ein Versprechen zurück, das auf das Modul auflöst. Hier ist ein Beispiel: System.import ('Pfad/to/module.js'). Dann (Funktion (Modul) {/ * Verwenden von Modul */}).

Kann ich SystemJs mit node.js verwenden?

Ja, SystemJs können mit node.js. verwendet werden. Es bietet einen universellen Modullader, der sowohl im Browser als auch im Node.js. Auf diese Weise können Sie Code schreiben, die zwischen dem Client und dem Server gemeinsam genutzt werden können. Sie können die Pfade und Abhängigkeiten Ihrer Module in der SystemJS -Konfiguration angeben. Wenn ein Modul geladen ist, lädt SystemJS auch seine Abhängigkeiten automatisch.

Was sind die Vorteile der Verwendung modularer JavaScript? Dies macht Ihren Code organisierter und leichter zu verwalten. Sie können den Code über verschiedene Teile Ihrer Anwendung wiederverwenden. Es erleichtert auch einfacher, Ihren Code zu testen, da jedes Modul unabhängig getestet werden kann.

Wie kann ich SystemJs konfigurieren? Diese Methode akzeptiert ein Objekt, das die Konfigurationsoptionen angibt. Einige der Optionen, die Sie konfigurieren können, umfassen Pfade, Karte, Pakete und Transpiler.

Kann ich SystemJs mit anderen JavaScript -Frameworks verwenden? Angular, React und Vue.js. Es bietet einen universellen Modullader, der Module aus einem dieser Frameworks laden kann.

Wie hoch ist die Zukunft von SystemJs? Es ist ein wesentlicher Bestandteil des JavaScript -Ökosystems, insbesondere für Projekte, die einen universellen Modullader benötigen. Mit der kontinuierlichen Entwicklung von JavaScript- und Web -Technologien wird sich SystemJs wahrscheinlich weiterentwickeln, um die Bedürfnisse der Entwickler zu erfüllen.

Das obige ist der detaillierte Inhalt vonModular JavaScript: Ein Anfängerhandbuch zu SystemJS & JSPM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!