export
Rend disponibles des fonctions, des classes et des valeurs depuis un module, pour que d’autres fichiers puissent les importer.
Exemple
#// points.js
export const MAX_POINTS = 1000
export function addPoints(current, amount) {
return Math.min(current + amount, MAX_POINTS)
}
// main.js
import { addPoints, MAX_POINTS } from './points.js'
console.log(addPoints(990, 50), MAX_POINTS)1000 1000
Définition et utilisation
#L’instruction export décide ce qui, dans un fichier donné, sera visible de l’extérieur. Tout ce que vous n’exportez pas reste privé au module. C’est une façon simple de cacher les détails et de n’exposer qu’un ensemble réfléchi de fonctions.
Un fichier peut avoir autant d’exports nommés que vous voulez : vous ajoutez export avant la déclaration, ou vous rassemblez les noms à la fin dans export { a, b }. Il ne peut y avoir qu’un seul export par défaut (export default), et il désigne en général la chose principale que le fichier offre, par ex. un composant ou une classe.
Vous pouvez aussi retransmettre les exports d’un autre module : export { name } from "./file.js" ou export * from "./file.js". C’est ainsi que l’on construit les fichiers index.js, qui rassemblent en un seul endroit les exports de tout un dossier.
Syntaxe
#export const name = value
export function name() {}
export class Name {}
export { name1, name2 as alias }
export default expression
export { name } from './module.js'
export * from './module.js'Plus d’exemples
#// format.js
function formatDate(date) {
return date.toISOString().slice(0, 10)
}
function formatPoints(points) {
return `${points} pts`
}
export { formatDate, formatPoints as points }
// main.js
import { formatDate, points } from './format.js'
console.log(points(75))
console.log(formatDate(new Date('2026-09-28T12:00:00Z')))75 pts 2026-09-28
// leaderboard.js
export default function renderLeaderboard(players) {
return players.map((player, index) => `${index + 1}. ${player}`).join('\n')
}
// main.js
import renderBoard from './leaderboard.js'
console.log(renderBoard(['Emma', 'Léa']))1. Emma 2. Léa
// components/index.js
export { default as Button } from './Button.js'
export { default as Card } from './Card.js'
export * from './icons.js'
// main.js
import { Button, Card, StarIcon } from './components/index.js'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
#- Préférez les exports nommés. L’éditeur les autocomplète mieux, et chaque import utilise le même nom, donc il est plus facile de les retrouver dans le projet.
export * fromne retransmet pas l’export par défaut. Vous devez l’indiquer explicitement :export { default } from "./file.js".
Entrées associées
#- importCharge les valeurs exportées par un autre module ES : fonctions, classes, constantes ou tout le module.
- constDéclare une constante à portée de bloc. Une telle variable ne peut pas recevoir une nouvelle valeur.
- functionDéclare une fonction nommée : un bloc de code avec des paramètres, que vous pouvez appeler autant de fois que vous voulez et qui peut renvoyer un résultat.
- classDéfinit une classe, c’est-à-dire un modèle pour créer des objets avec les mêmes champs et méthodes.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.