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 :
ou bien à la fin du fichier :
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 :
Importation de l'export par défaut
L'importation de l'export par défaut se fait avec un import
sans accolades :
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) :