Chapitre 4 : Modules ES6

Les modules ES6 permettent d'organiser le code en fichiers séparés, avec un système d'import/export explicite.

En PHP, vous utilisez require, include, ou l'autoloading PSR-4. En JavaScript moderne, on utilise import et export.

Permet d'exporter plusieurs éléments depuis un fichier :

snippet.javascript

// utils/math.js
 
// Export à la déclaration
export const PI = 3.14159;
 
export function add(a, b) {
    return a + b;
}
 
export const multiply = (a, b) => a * b;
 
// OU export groupé à la fin
const PI = 3.14159;
function add(a, b) { return a + b; }
const multiply = (a, b) => a * b;
 
export { PI, add, multiply };

Un seul export par défaut par fichier. Généralement utilisé pour le composant/classe principal :

snippet.javascript

// components/Button.jsx
 
const Button = ({ label, onClick }) => {
    return <button onClick={onClick}>{label}</button>;
};
 
export default Button;
 
// OU directement
export default function Button({ label, onClick }) {
    return <button onClick={onClick}>{label}</button>;
}

snippet.javascript

// services/api.js
 
// Export par défaut : le client API principal
const apiClient = {
    get: (url) => fetch(url).then(r => r.json()),
    post: (url, data) => fetch(url, { method: 'POST', body: JSON.stringify(data) })
};
 
// Exports nommés : utilitaires
export const API_URL = "https://api.example.com";
export const handleError = (error) => console.error(error);
 
export default apiClient;

snippet.javascript

// Importer des exports nommés (accolades obligatoires)
import { add, multiply } from './utils/math.js';
import { PI } from './utils/math.js';
 
// Renommer à l'import
import { add as addition } from './utils/math.js';
 
// Importer tout sous un namespace
import * as MathUtils from './utils/math.js';
// Utilisation : MathUtils.add(1, 2), MathUtils.PI

snippet.javascript

// Importer l'export par défaut (pas d'accolades)
import Button from './components/Button.jsx';
 
// Le nom est libre (pas lié au nom dans le fichier source)
import MonBouton from './components/Button.jsx'; // OK

snippet.javascript

// Default + named dans le même import
import apiClient, { API_URL, handleError } from './services/api.js';

snippet.javascript

// Même dossier
import { helper } from './helper.js';
 
// Dossier parent
import { config } from '../config.js';
 
// Sous-dossier
import Button from './components/Button.jsx';

snippet.javascript

// Packages npm - pas de chemin relatif
import React from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';

SmartMaker configure un alias src :

snippet.javascript

// Sans alias (chemins relatifs fragiles)
import Button from '../../../components/Button.jsx';
 
// Avec alias (plus propre)
import Button from 'src/components/Button.jsx';

Configuration dans vite.config.js :

snippet.javascript

export default defineConfig({
    resolve: {
        alias: {
            'src': '/src'
        }
    }
});

snippet.php

// PHP - autoloading PSR-4
namespace App\Services;
 
use App\Models\User;
use App\Utils\Helper;
 
class UserService {
    // ...
}

snippet.javascript

// JavaScript ES6
import User from 'src/models/User.js';
import { formatDate } from 'src/utils/helper.js';
 
export default class UserService {
    // ...
}

src/
├── components/
│   ├── app/                    # Providers, Router
│   │   ├── SmartCommonProvider/
│   │   │   └── index.jsx       # export default SmartCommonProvider
│   │   └── Router/
│   │       └── index.jsx
│   │
│   ├── pages/
│   │   ├── public/
│   │   │   └── LoginPage/
│   │   │       └── index.jsx
│   │   └── private/
│   │       └── HomePage/
│   │           └── index.jsx
│   │
│   └── common/
│       ├── Button/
│       │   └── index.jsx
│       └── Card/
│           └── index.jsx
│
├── hooks/
│   └── useAuth.js
│
├── services/
│   └── api.js
│
└── utils/
    └── format.js

Quand un dossier contient index.jsx, on peut importer le dossier directement :

snippet.javascript

// Ces deux imports sont équivalents
import Button from './components/common/Button/index.jsx';
import Button from './components/common/Button';

Un fichier qui re-exporte plusieurs modules :

snippet.javascript

// components/common/index.js
export { default as Button } from './Button';
export { default as Card } from './Card';
export { default as Modal } from './Modal';
 
// Utilisation
import { Button, Card, Modal } from 'src/components/common';

Pour le code-splitting (chargement à la demande) :

snippet.javascript

// Import statique (chargé au démarrage)
import HeavyComponent from './HeavyComponent';
 
// Import dynamique (chargé quand nécessaire)
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
 
// Utilisation avec Suspense
<Suspense fallback={<Loading />}>
    <HeavyComponent />
</Suspense>

Créer un fichier utils/string.js qui exporte :

• Une constante DEFAULT_LOCALE = "fr-FR"
• Une fonction capitalize(str) qui met la première lettre en majuscule
• Une fonction par défaut formatName(firstName, lastName) qui retourne “LASTNAME Firstname”

Solution :

snippet.javascript

// utils/string.js
 
export const DEFAULT_LOCALE = "fr-FR";
 
export function capitalize(str) {
    if (!str) return '';
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}
 
export default function formatName(firstName, lastName) {
    return `${lastName.toUpperCase()} ${capitalize(firstName)}`;
}

Importer et utiliser le module créé :

snippet.javascript

// app.js
// 1. Importer formatName (default)
// 2. Importer capitalize et DEFAULT_LOCALE (named)
// 3. Afficher formatName("jean", "dupont")
// 4. Afficher capitalize("bonjour")

Solution :

snippet.javascript

// app.js
import formatName, { capitalize, DEFAULT_LOCALE } from './utils/string.js';
 
console.log(formatName("jean", "dupont")); // "DUPONT Jean"
console.log(capitalize("bonjour"));         // "Bonjour"
console.log(DEFAULT_LOCALE);                // "fr-FR"

1. Export nommé : export const x ou export { x, y }
2. Export default : export default X (un seul par fichier)
3. Import nommé : import { x, y } from './file' (accolades)
4. Import default : import X from './file' (pas d'accolades)
5. Alias : import { x as alias } from './file'
6. Tout importer : import * as Module from './file'
7. index.jsx : permet import X from './folder'

Vous avez maintenant les bases JavaScript ES6+ nécessaires pour React :

← Chapitre précédent | Retour au module | Module suivant : Introduction à React →