Dans l'environnement ES6, un module représente un fichier indépendant. Toutes les variables définies à l'intérieur de ce fichier ne sont pas accessibles depuis l'extérieur. Si vous souhaitez permettre l'accès à certaines variables depuis l'extérieur, vous devez utiliser le mot-clé export pour les rendre disponibles.

Exemple pratique

Dans le répertoire src, créez un dossier common et un fichier utilitaires.js. Ajoutez le code suivent dans ce fichier :

export var premierNom = 'Jean';

export var nomFamille = 'Dupont';

export var annee = 2024;

export const CodeSucces = 1;

Ce code est équivalent à :

var premierNom = 'Jean';

var nomFamille = 'Dupont';

var annee = 2024;

const CodeSucces = 1;

export {premierNom, nomFamille, annee, CodeSucces};

ES6 interprète utilitaires.js comme un module. Pour permettre l'accès à ces variables depuis l'extérieur, il faut les exporter. La deuxième écriture est recommandée car elle permet de visualiser clairement les variables exportées en un seul coup d'œil.

Dans le fichier main.js situé dans le répertoire src, ajoutez le code suivant :

import {premierNom, nomFamille, annee, CodeSucces} from 'common/utilitaires';

console.log('premierNom\t' + premierNom);

console.log('nomFamille\t' + nomFamille);

console.log('annee\t' + annee);

console.log('CodeSucces\t' + CodeSucces);

Les variables premierNom, nomFamille, annee et CodeSucces s'afficheront correctement. Cette méthode d'importation impose que les noms des variables correspondent exactement. Pour contourner cette contrainte, vous pouvez utiliser l'alias as.

Spécifier un alias lors de l'importation

export {premierNom, nomFamille, annee, CodeSucces};

import {premierNom, nomFamille, annee, CodeSucces as CodeSucces1} from 'common/utilitaires';

console.log('CodeSucces\t' + CodeSucces1);

Spécifier un alias lors de l'exportation

export {premierNom, nomFamille, annee, CodeSucces as CodeSucces2};

import {premierNom, nomFamille, annee, CodeSucces2} from 'common/utilitaires';

console.log('CodeSucces \t' + CodeSucces2);

Il est également possible d'utilisre la syntaxe suivante directement :

export { import1 as nom1, import2 as nom2, …, nomN } from …;

Cette syntaxe est recommandée car elle est plus claire et plus directe.

Export de fonctions et de classes

Le mot-clé export permet également d'exporter des fonctions et des classes. Ajoutez le code suivant dans utilitaires.js :

export function multiplier (x, y) {
  return x * y;
};

Ce code expose une fonction apelée multiplier.

Dans main.js, ajoutez :

import {multiplier} from 'common/utilitaires';

console.log('multiplier\t' + multiplier);

La fonction multiplier sera affichée correctement.

Si vous modifiez le code de utilitaires.js de la manière suivante :

export multiplier = function (x, y) {
  return x * y;
};

Ce code est équivalent à :

function multiplier (x, y) {
  return x * y;
};
export {multiplier};

Si vous utilisez export default à la place de export, les méthodes d'importation précédentes ne fonctionneront plus. En effet, export default ne peut être utilisé qu'une seule fois et lors de l'importation, les accolades ne sont pas nécessaires :

function multiplier (x, y) {
  return x * y;
};
export default {multiplier};
import multiplier from 'common/utilitaires';

Pour exporter l'intégralité d'un fichier, vous pouvez utiliser :

export default {
  data () {
    return {
      premierNom: 'Jean'
    };
  },
  methods: {
    multiplier (x, y) {
      return x * y;
    }
  }
};