Nobuild mit Rails und Importmap

Die neuesten Versionen von Ruby on Rails haben sich auf die Einfachheit in verschiedenen Aspekten des Frameworks konzentriert, begleitet von dem Versprechen, zum „Ein-Mann-Framework“ zurückzukehren (wo ein einzelner Entwickler effektiv eine gesamte Anwendung erstellen und warten kann).

Die Importmap Rails-Bibliothek basiert auf dem Prinzip, dass moderne Webbrowser mit der ECMAScript-Spezifikation Schritt gehalten haben und ES-Module (ESM) interpretieren können. Als Webstandard können Sie mit Importmap steuern, wie JavaScript-Module im Browser aufgelöst werden, und Abhängigkeiten und Versionen verwalten, ohne den an den Browser gesendeten Code transpilieren oder bündeln zu müssen.

So funktioniert der Importmap-Webstandard

Alles beginnt mit einem Skript-Tag vom Typ importmap, das im Hauptlayout oder auf der Webseite Ihrer Anwendung definiert ist. Innerhalb dieses Tags definiert ein JSON-Objekt Aliase und die entsprechenden Pfade zum Quellcode.

<script type="importmap">
  {
    "imports": {
      "application": "/assets/application.js",
      "local-time": "https://cdn.jsdelivr.net/npm/local-time@3.0.2/app/assets/javascripts/local-time.es2017-esm.min.js",
      "utils": "/assets/utils.js"
    }
  }
</script>

In derselben Karte können Sie Bibliothekspfade kombinieren, die auf ein CDN verweisen oder lokale Ressourcen verwenden. Um Bibliotheken aus dieser Karte zu verwenden, verweisen Sie auf den Aliasnamen.

<!-- Below the importmap script -->
<script type="module">import "application"</script>

Und in Ihre application.js importieren Sie die erforderlichen Abhängigkeiten:

// application.js

import LocalTime from "local-time";
LocalTime.start();

import "utils";

Importmap-Unterstützung ist in den Browsern Chrome 89, Safari 16.4, Firefox 108 und Edge 89 vorhanden. Fügen Sie für ältere Browser eine Polyfüllung ein:

<script
  async
  src="https://ga.jspm.io/npm:es-module-shims@1.10.1/dist/es-module-shims.js"
></script>

So funktioniert Importmap in Ruby on Rails

Die Importmap-Funktionalität in Ruby on Rails folgt demselben oben beschriebenen Standard und bietet eine einfache Möglichkeit, Karten und Versionsdateien zu erstellen. Lassen Sie uns am Beispiel einer Webanwendung namens heroImage (Quellcode auf Github verfügbar) die Implementierung untersuchen.

Wenn Sie eine neue Rails 8-Anwendung erstellen, wird das Gem importmap-rails standardmäßig hinzugefügt und installiert. Es wird eine Datei config/importmap.rb erstellt, in der Sie den in Ihrer Anwendung benötigten JavaScript-Code anheften können.

pin "application"

pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"

pin_all_from "app/javascript/controllers", under: "controllers", preload: false

Das Schlüsselwort pin benötigt bis zu drei Argumente. Der erste ist erforderlich, da es sich um den Alias ​​des JavaScript-Codes handelt. Pin „application“ ist eine Verknüpfung für die Datei application.js mit dem Alias ​​application:

pin "application", to: "application.js"

Wenn Alias- und Dateinamen unterschiedlich sind, verwenden Sie das Schlüsselwort to::

pin "@hotwired/turbo-rails", to: "turbo.min.js"

Das Schlüsselwort pin_all_from hilft dabei, auf mehrere Dateien gleichzeitig zu verweisen. Das erste Argument ist der Pfad, in dem sich die JavaScript-Dateien befinden, und das Argument „under:“ stellt den Alias ​​für jede Datei voran. Der generierte Alias ​​verwendet das Präfix under und den Dateinamen, z. B. „controllers/alert-controller“ für die Datei „alert_controller.js“.

Um die Importmap-JSON-Datei anzuzeigen, führen Sie Folgendes aus:

<script type="importmap">
  {
    "imports": {
      "application": "/assets/application.js",
      "local-time": "https://cdn.jsdelivr.net/npm/local-time@3.0.2/app/assets/javascripts/local-time.es2017-esm.min.js",
      "utils": "/assets/utils.js"
    }
  }
</script>

Rails löst das gesamte JavaScript über das Propshaft-Gem auf, das den physischen Pfad des JavaScript-Codes auflöst, dem Webpfad /assets zuordnet und den Digest zu jeder Datei hinzufügt, um besseres Caching und Ungültigmachungen zu ermöglichen.

Propshaft erkennt physische Pfade anhand der Konfiguration des Assets:

<!-- Below the importmap script -->
<script type="module">import "application"</script>

Stellen Sie sicher, dass Ihre Dateien in einem der registrierten Pfade vorhanden sind, oder fügen Sie Ihren eigenen Pfad hinzu, der von Propshaft und Importmap erkannt werden soll.

Mit Importmap in Rails können Sie angeben, wie der Browser JavaScript-Dateien laden soll. Es gibt zwei Optionen: Vorladen (Standard) und kein Vorladen. Preload weist den Browser an, Dateien so schnell wie möglich herunterzuladen. Importmap generiert einen Link-Tag mit rel="modulepreload":

// application.js

import LocalTime from "local-time";
LocalTime.start();

import "utils";

Wenn Sie das Argument „preload“ auf „false“ setzen, wird das Link-Tag nicht generiert und der Browser lädt die Datei bei Bedarf herunter.

Mit der Importmap von Rails können Sie auch JavaScript-Code von einem CDN anheften, indem Sie das to:-Argument für die URL:
verwenden

<script
  async
  src="https://ga.jspm.io/npm:es-module-shims@1.10.1/dist/es-module-shims.js"
></script>

Die Importmap enthält eine CLI zum Anheften oder Anheften von JavaScript-Code in die Datei config/importmap.rb. Es enthält auch Befehle zum Aktualisieren, Überwachen und Überprüfen von Versionen:

pin "application"

pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"

pin_all_from "app/javascript/controllers", under: "controllers", preload: false

Wenn Sie den Befehl pin für ein JavaScript-Paket verwenden, löst Importmap Paketabhängigkeiten auf und lädt das Paket und die Abhängigkeiten zu vendor/javascript herunter, anstatt das to:-Argument auf das CDN zu setzen , wodurch die Rails-Anwendung diese Dateien bereitstellen kann:

pin "application", to: "application.js"

Dieser Ansatz funktioniert gut, wenn Ihr Paket einfache Abhängigkeiten oder klar definierte Abhängigkeiten im JavaScript-Paket aufweist. Wenn dies nicht der Fall ist, wird die Verwendung schwierig, wenn Importmap den Code unter vendor/javascript anbietet. Es funktioniert möglicherweise mit der URL und dem manuellen Hinzufügen von Abhängigkeiten, oder Sie können den bereitgestellten Code optimieren, damit es funktioniert.

Wie arbeite ich mit Rails Gems, Engines und Importmap?

Es gibt zwei Ansätze zum Erstellen von Ruby on Rails-Gems, die mit Importmap kompatibel sind. Der erste Ansatz ermöglicht es Ihrem Gem, JavaScript-Code bereitzustellen, den Sie in der Importmap-Konfiguration anheften können. So werden die Juwelen Turbo-Rails und Stimulus-Rails umgesetzt.

Platzieren Sie Ihren JavaScript-Code im Ordner app/assets/javascripts Ihres Gems. Möglicherweise benötigen Sie einen zusätzlichen Prozess, der die JavaScript-Dateien minimiert und JavaScript-Kartendateien generiert. Definieren Sie dann innerhalb der Engine-Klasse einen Initialisierungs-Hook, um Ihren JavaScript-Code mit Propshaft:
zu deklarieren

<script type="importmap">
  {
    "imports": {
      "application": "/assets/application.js",
      "local-time": "https://cdn.jsdelivr.net/npm/local-time@3.0.2/app/assets/javascripts/local-time.es2017-esm.min.js",
      "utils": "/assets/utils.js"
    }
  }
</script>

Die zweite Option verwendet eine Importmap-Konfigurationsdatei. Wenn Ihre Engine über eine Layoutvorlage verfügt und die Ansichten von der Hostanwendung isoliert sind und die Engine den JavaScript-Code nicht mit der Hostanwendung teilen muss, können Sie unter config/importmap.rb eine Importmap-Konfigurationsdatei erstellen , legen Sie Ihre Pins fest, platzieren Sie Ihren JavaScript-Code unter app/javascript und konfigurieren Sie die Engine mit einem Initialisierer.

Öffnen Sie Ihre Ruby-Datei engine.rb und fügen Sie die Importmap-Konfigurationsdatei und einen Sweeper hinzu:

<!-- Below the importmap script -->
<script type="module">import "application"</script>

Geben Sie die Importmap an, die in der Layoutvorlage Ihrer Engine verwendet werden soll:

// application.js

import LocalTime from "local-time";
LocalTime.start();

import "utils";

Um JavaScript-Code mit der Hostanwendung, wie z. B. Stimulus-Controllern, zu teilen, erstellen Sie eine teilweise Importmap-Konfigurationsdatei und stellen Sie die Engine so ein, dass sie sie mit der Hauptdatei in der Hostanwendung zusammenführt.

Erstellen Sie eine Importmap-Konfigurationsdatei unter config/importmap.rb und fügen Sie die JavaScript-Pins hinzu, um sie mit der Hostanwendung zu teilen. Wenn Sie Abhängigkeiten für externe Pakete haben, fügen Sie diese über einen Generator oder Installer zur Hostanwendung hinzu:

<script
  async
  src="https://ga.jspm.io/npm:es-module-shims@1.10.1/dist/es-module-shims.js"
></script>

Öffnen Sie Ihre engine.rb-Datei und fügen Sie einen Initialisierer hinzu:

pin "application"

pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"

pin_all_from "app/javascript/controllers", under: "controllers", preload: false

Welche Vorteile bietet die Verwendung von Importmap?

Aus der Sicht eines Ruby on Rails-Entwicklers besteht der Hauptvorteil der Verwendung von Importmap darin, dass kein JavaScript-Laufzeitknoten erforderlich ist und keine Abhängigkeit von node_modules besteht.

Außerdem benötigen Sie im Entwicklungsmodus keinen zusätzlichen Prozess, um den JavaScript-Code zu transpilieren und zu minimieren. Sie verlassen sich auf Webstandards, um dem Browser den Code bereitzustellen. Die Bereitstellung Ihrer Rails-Anwendung hinter einem Reverse-Proxy bietet mehrere Vorteile. Erstens: Wenn Sie das HTTP/2-Protokoll aktivieren, kann Ihr Browser mehrere Dateien mit einer einzigen HTTP-Verbindung abrufen, und das Herunterladen vieler kleiner JavaScript-Dateien hat keine Auswirkungen auf die Leistung.

Wenn Sie Ihren Proxy für die Verwendung der GZIP- oder Brotli-Komprimierung aktivieren, stellen Sie sicher, dass Sie sehr kleine Dateien senden und gleichzeitig die Lesbarkeit bei der Verwendung von Browser-Entwicklertools gewährleisten. Wenn Sie eine Datei ändern, müssen Sie nur diese bestimmte Datei ungültig machen, die der Browser herunterlädt. Der Browser weiß aufgrund des Fingerabdrucks, den Propshaft allen Dateien hinzufügt, dass eine Datei geändert wurde.

Durch die Verwendung eines Reverse-Proxys wie Thruster zusammen mit Puma werden die von der Rails-Anwendung bereitgestellten Assets ausgelagert. Thruster kann Assets zwischenspeichern und bereitstellen, wenn ein Client eine Datei anfordert.

Wann Sie Importmap nicht verwenden sollten

Es gibt Fälle, in denen Sie die Verwendung von Importmap in einer Rails-Anwendung vermeiden sollten. Wenn Sie eine SPA-Anwendung mit React, Vue oder einem anderen ähnlichen Tool erstellen, ist die Wahrscheinlichkeit hoch, dass Sie Ihren Code mit TypeScript schreiben. In diesem Fall sollten Sie bei der Bündelungsstrategie bleiben.

Wenn Sie außerdem ältere Browser unterstützen müssen, ist die Bündelung mit Code-Transpilation eine bessere Option.

Das obige ist der detaillierte Inhalt vonNobuild mit Rails und Importmap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!