import
Charge les valeurs exportées par un autre module ES : fonctions, classes, constantes ou tout le module.
Exemple
#// utils.js
export function formatPoints(points) {
return `${points} pts`
}
// main.js
import { formatPoints } from './utils.js'
console.log(formatPoints(120))120 pts
Définition et utilisation
#L’instruction import récupère ce qu’un autre fichier a rendu disponible avec export. Grâce aux modules, vous divisez le code en petits fichiers avec une tâche clairement définie, et chaque fichier a sa propre portée, donc les variables n’encombrent pas l’espace global.
Vous importez les exports nommés entre accolades, sous le même nom (import { formatPoints } from "./utils.js"), en le changeant éventuellement avec as. Vous importez l’export par défaut sans accolades et sous le nom de votre choix. L’écriture import * as utils rassemble tous les exports dans un seul objet.
Les déclarations import doivent se trouver au premier niveau du fichier, et les modules importés s’exécutent avant que le reste du code ne démarre. Quand un module ne doit être chargé qu’en cas de besoin, utilisez la fonction import(), qui renvoie une promesse. Dans le navigateur, un script avec des instructions import doit avoir l’attribut type="module".
Syntaxe
#import defaultExport from './module.js'
import { name1, name2 as alias } from './module.js'
import defaultExport, { name } from './module.js'
import * as namespace from './module.js'
import './module.js'
const module = await import('./module.js')Plus d’exemples
#// student.js
export default class Student {
constructor(name) {
this.name = name
}
}
export const MAX_LEVEL = 50
// main.js
import Student, { MAX_LEVEL as limit } from './student.js'
const emma = new Student('Emma')
console.log(emma.name, limit)Emma 50
// math.js
export const add = (a, b) => a + b
export const multiply = (a, b) => a * b
// main.js
import * as math from './math.js'
console.log(math.add(2, 3))
console.log(math.multiply(4, 5))5 20
const button = document.querySelector('#stats')
button.addEventListener('click', async () => {
const { drawChart } = await import('./chart.js')
drawChart()
})Le code du graphique ne sera téléchargé qu’après le clic. La page se charge plus vite, car elle ne récupère pas tout d’un coup.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Dans le navigateur, indiquez le chemin complet avec l’extension, par ex.
./utils.js. L’écriture sans extension ne fonctionne généralement que dans des outils comme Vite ou webpack. - Les noms importés sont en lecture seule. Vous ne pouvez pas leur affecter une nouvelle valeur, mais quand le module source change sa variable, vous verrez la nouvelle valeur.
- Les modules ouverts directement depuis le disque (
file://) ne fonctionnent généralement pas, à cause des règles de sécurité du navigateur. Lancez le projet sur un serveur local, par ex. avec Vite.
Entrées associées
#- exportRend disponibles des fonctions, des classes et des valeurs depuis un module, pour que d’autres fichiers puissent les importer.
- awaitMet en pause une fonction async jusqu’au règlement d’une promesse, puis renvoie sa valeur ou lève son erreur.
- async functionDéclare une fonction asynchrone, qui renvoie toujours une promesse et peut utiliser le mot-clé await à l’intérieur.
- constDéclare une constante à portée de bloc. Une telle variable ne peut pas recevoir une nouvelle valeur.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.