Nobuild avec Rails et Importmap

Les dernières versions de Ruby on Rails se sont concentrées sur la simplicité dans différents aspects du framework, accompagnées de la promesse de revenir au « framework one-man » (dans lequel un seul développeur peut efficacement créer et maintenir une application entière).

La bibliothèque Importmap Rails est basée sur le principe selon lequel les navigateurs Web modernes ont rattrapé la spécification ECMAScript et peuvent interpréter les modules ES (ESM). En tant que standard Web, Importmap vous permet de contrôler la manière dont les modules JavaScript sont résolus dans le navigateur et de gérer les dépendances et les versions sans avoir besoin de transpiler ou de regrouper le code envoyé au navigateur.

Fonctionnement du standard Web Importmap

Tout commence par une balise de script de type importmap définie dans la mise en page principale ou la page Web de votre application. A l'intérieur de cette balise, un objet JSON définit les alias et leurs chemins correspondants vers le code source.

<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>

Dans une même map, vous pouvez mélanger les chemins des bibliothèques pointant vers un CDN ou utilisant des ressources locales. Pour utiliser les bibliothèques de cette carte, référencez le nom de l'alias.

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

Et dans votre application.js, importez les dépendances nécessaires :

// application.js

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

import "utils";

La prise en charge d'Importmap est présente dans les navigateurs Chrome 89 , Safari 16.4 , Firefox 108 et Edge 89 . Pour les navigateurs plus anciens, incluez un polyfill :

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

Comment fonctionne Importmap dans Ruby on Rails

La fonctionnalité Importmap dans Ruby on Rails suit la même norme décrite ci-dessus et offre un moyen simple de créer des cartes et des fichiers de version. En utilisant une application Web nommée heroImage comme exemple (code source disponible sur Github), explorons l'implémentation.

Lorsque vous créez une nouvelle application Rails 8, la gem importmap-rails est ajoutée et installée par défaut. Un fichier config/importmap.rb est créé dans lequel vous pouvez épingler le code JavaScript nécessaire à votre application.

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

Le mot-clé pin prend jusqu'à trois arguments. Le premier est obligatoire car il s’agit de l’alias du code JavaScript. pin "application" est un raccourci pour le fichier application.js avec l'alias application :

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

Lorsque les alias et les noms de fichiers diffèrent, utilisez le mot-clé to : 

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

Le mot-clé pin_all_from permet de référencer plusieurs fichiers à la fois. Le premier argument est le chemin où se trouvent les fichiers JavaScript, et l'argument under: préfixe l'alias de chaque fichier. L'alias généré utilise le préfixe under et le nom du fichier, comme controllers/alert-controller pour le fichier alert_controller.js.

Pour visualiser le fichier Importmap JSON, exécutez :

<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 résout tout le JavaScript via la gemme Prop Shaft, qui résout le chemin physique du code JavaScript, mappe au chemin Web /assets et ajoute le résumé à chaque fichier pour une meilleure mise en cache et invalidations.

Prop Shaft découvre les chemins physiques à partir de la configuration de l'actif :

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

Assurez-vous que vos fichiers existent dans l'un des chemins enregistrés ou ajoutez votre propre chemin pour qu'il soit découvert par Prop Shaft et Importmap.

Importmap dans Rails vous permet de spécifier comment le navigateur doit charger les fichiers JavaScript. Il existe deux options : préchargement (par défaut) et pas de préchargement. Preload indique au navigateur de télécharger les fichiers dès que possible. Importmap génère une balise de lien avec rel="modulepreload":

// application.js

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

import "utils";

Si vous définissez l'argument de préchargement sur false, la balise de lien n'est pas générée et le navigateur télécharge le fichier en cas de besoin.

Avec Importmap de Rails, vous pouvez également épingler du code JavaScript à partir d'un CDN en utilisant l'argument to: pour l'URL :

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

L'Importmap comprend une CLI pour épingler ou désépingler le code JavaScript dans le fichier config/importmap.rb. Il comprend également des commandes pour mettre à jour, auditer et inspecter les versions :

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

Lors de l'utilisation de la commande pin pour un package JavaScript, au lieu de définir l'argument to: sur le CDN, Importmap résout les dépendances du package et télécharge le package et les dépendances vers vendor/javascript , permettant à l'application Rails de servir ces fichiers :

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

Cette approche fonctionne bien lorsque votre package a des dépendances simples ou des dépendances bien définies dans le package JavaScript. Si ce n'est pas le cas, il devient difficile d'utiliser Importmap en vendant le code à vendor/javascript. Cela peut fonctionner avec l'URL et l'ajout manuel de dépendances, ou vous pouvez modifier le code fourni pour le faire fonctionner.

Comment travailler avec Rails Gems – Moteurs – et Importmap ?

Il existe deux approches pour créer des gemmes Ruby on Rails compatibles avec Importmap. La première approche permet à votre gem de fournir du code JavaScript, que vous pouvez choisir d'épingler dans la configuration Importmap. C'est ainsi que les gemmes turbo-rails et stimulus-rails sont implémentées.

Placez votre code JavaScript dans le dossier app/assets/javascripts de votre gem. Vous aurez peut-être besoin d'un processus supplémentaire qui réduit les fichiers JavaScript et génère des fichiers de carte JavaScript. Ensuite, dans la classe Engine, définissez un hook d'initialisation pour déclarer votre code JavaScript avec Prop Shaft :

<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>

La deuxième option utilise un fichier de configuration Importmap. Si votre moteur a son modèle de mise en page et que les vues sont isolées de l'application hôte, et que le moteur n'a pas besoin de partager le code JavaScript avec l'application hôte, vous pouvez créer un fichier de configuration Importmap sur config/importmap.rb , définissez vos broches, placez votre code JavaScript sur app/javascript et configurez le moteur avec un initialiseur.

Ouvrez votre fichier Engine.rb Ruby et ajoutez le fichier de configuration Importmap et un balayeur :

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

Spécifiez l'Importmap à utiliser dans le modèle de mise en page de votre moteur :

// application.js

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

import "utils";

Pour partager du code JavaScript avec l'application hôte, comme les contrôleurs Stimulus, créez un fichier de configuration Importmap partiel et configurez le moteur pour le fusionner avec le moteur principal de l'application hôte.

Créez un fichier de configuration Importmap sur config/importmap.rb et ajoutez les broches JavaScript à partager avec l'application hôte. Si vous avez des dépendances pour des packages externes, ajoutez-les via un générateur ou un installateur à l'application hôte :

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

Ouvrez votre fichier engine.rb et ajoutez un initialiseur :

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

Quels sont les avantages de l’utilisation d’Importmap ?

Du point de vue d'un développeur Ruby on Rails, le principal avantage de l'utilisation d'Importmap est la liberté de nécessiter un nœud de type runtime JavaScript et la liberté de la dépendance node_modules.

De plus, vous n'avez pas besoin d'un processus supplémentaire en mode développement pour transpiler et réduire le code JavaScript. Vous vous appuyez sur les standards du Web pour transmettre le code au navigateur. Le déploiement de votre application Rails derrière un proxy inverse offre plusieurs avantages. Premièrement, si vous activez le protocole HTTP/2, votre navigateur peut récupérer plusieurs fichiers avec une seule connexion HTTP, et le téléchargement de nombreux petits fichiers JavaScript n'aura pas d'impact sur les performances.

Activer votre proxy pour utiliser la compression gzip ou brotli garantit que vous envoyez de très petits fichiers tout en conservant la lisibilité lorsque vous utilisez les outils de développement du navigateur. Si vous modifiez un fichier, il vous suffit d'invalider ce fichier spécifique, que le navigateur téléchargera. Le navigateur sait qu'un fichier a été modifié en raison de l'empreinte digitale que Prop Shaft ajoute à tous les fichiers.

L'utilisation d'un proxy inverse comme Thruster avec Puma décharge les actifs servis par l'application Rails. Thruster peut mettre en cache des actifs et les servir lorsqu'un client demande un fichier.

Quand ne pas utiliser Importmap

Il existe des cas où vous devriez éviter d'utiliser Importmap dans une application Rails. Si vous créez une application SPA avec React, Vue ou tout autre outil similaire, il est fort probable que vous écriviez votre code avec TypeScript. Dans ce cas, vous devez vous en tenir à la stratégie de regroupement.

De plus, si vous devez prendre en charge des navigateurs plus anciens, le regroupement avec la transpilation de code est une meilleure option.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!