Les import maps en JavaScript

Les import maps sont une fonctionnalité moderne de JavaScript qui permet de contrôler comment le navigateur résout les imports de modules.

Vous avez sûrement déjà rencontré dans vos projets des modules JavaScript, aussi appelés ESM (EcmaScript Modules) qui induisent un découpage des portions de code et de données. C'est très pratique, avec certains fichiers - en général fournis par une bibliothèque - qui exportent des fonctions, tableaux, objets, etc. pour les mettre à la disposition d'autres fichiers - en général les vôtres - qui les importent.

On sait aussi que depuis quelques années de tels scripts peuvent être chargés dans le navigateur à l'aide de la balise script équipée de l'attribut type="module".

Que sont les import maps ?

Une déclaration d'import map pourrait être la suivante à l'aide de la nouvelle valeur type="importmap".

<script type="importmap">
{
    "imports": {
        "logger": "/js/logger.js",
        "tools/": "/js/tools/",
        "lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
    }
}
</script>

On peut constater qu'il s'agit d'un objet, contenant une clé "imports", elle même définissant une correspondance entre des noms courts et des chemins longs.

On peut aussi faire appel à un beau fichier JSON contenant cette "carte", ce qui semblera plus propre que de les déclarer inline dans le corps de la page.

<script type="importmap" src="map.json">

Avantages

Cela a pour but de :

• Simplifier la gestion des dépendances dans le navigateur.
• Permettre d'utiliser des noms simples plutôt que des chemins complets.
• Éviter d'avoir à spécifier les versions dans chaque import.

Ainsi on pourra écrire ensuite

import _ from 'lodash';

// Import depuis un chemin local
import { log } from 'logger';

// Import via un préfixe
import { maFonction } from 'tools/malib.js';

On améliore la lisibilité et on peut plus facilement changer les versions et les chemins réels vers les dépendances.

Il y a quelques petites limitations : les projets d'envergure avec des frameworks et des outils de compilation tels que Vite, viennent déjà avec des solutions de résolution de modules. Certaines fonctionnalités qui optimisent le développement et le poids des ressources (hot reloading, tree shaking) ne sont pas disponibles. C'est pourquoi on s'en servira plutôt pour du prototypage rapide, des petites démonstrations techniques ou des projets qui ne passent pas par des frameworks évolués.

L'attribut type="importmap" est supporté par tous les navigateurs actuels et considéré comme faisant partie de la baseline 2023.