Imports / exports

Pour pouvoir découper un projet en plusieurs fichiers, il est nécessaire de comprendre la syntaxe des imports, et donc également des exports.

Paradoxalement, Javascript ne propose en standard aucun système d'import 🤡, c'est pourquoi plusieurs systèmes ont coexisté par le passé, notamment CommonJS, RequireJS, AMD, etc. Aujourd'hui, le système à utiliser est celui d'ES6 (ECMAScript 6, la norme la plus récente de Javascript). C'est celui qui est présenté ici.

Exports

Contrairement à Python, le contenu d'un fichier (fonctions, variables, constantes, ...) n'est pas automatiquement accessible depuis d'autres fichiers, il est privé par défaut. Il faut déclarer les exports explicitement.

Les objets exportés peuvent être déclarés au fur et à mesure :

export const pi = 3.14159;

export function carre(x) {
  return x*x
}

ou bien à la fin du fichier :

const pi = 3.14159;

function carre(x) {
  return x*x
}

export pi, carre;

Export par défaut

Si un fichier contient un seul objet à exporter, ou bien un objet principal, celui-ci peut être déclaré comme export par défaut, à l'aide de export default, soit sur l'objet lui-même, soit à la fin du fichier :

/* Fichier Matin.js */

export default function Matin(props) {
  // C'est l'unique export de ce fichier, on le déclare comme export par défaut
}

Imports

La syntaxe d'importation standard est :

// Importation depuis le fichier ./lib/functions.js
import { pi, carre } from './lib/functions';

console.log(pi * carre(5))

Un objet peut être importé sous un alias :

import { pi, carre as c } from './lib/functions';

console.log(pi * c(5))

Importation de l'export par défaut

L'importation de l'export par défaut se fait avec un import sans accolades :

import Matin from './components/Matin.js'

Le nom utilisé est arbitraire, il n'a pas besoin d'être le même que dans le fichier original (puisqu'on sait, de toute façon, de quel objet il s'agit, à savoir l'export par défaut) :

import Morning from './components/Matin.js'