Skip to content

ES6 Modules ou CommonJS ?

Nous allons explorer les différences entre le système de modules CommonJS (require) et le système ES6 (import/from), puis voir comment paramétrer et utiliser import/from dans un projet Node.js.

1. Comprendre les différences

CommonJS (require)

  • Origine: Utilisé dans Node.js avant ES6.

  • Chargement: Synchrone.

  • Syntaxe:

    javascript
    const express = require('express');
    const express = require('express');

ES6 Modules (import/from)

  • Origine: Introduit dans la spécification ES6 (ES2015). Utilisé dans les navigateurs modernes et les versions récentes de Node.js.

  • Chargement: Asynchrone (mais peut être synchronisé dans Node.js).

  • Syntaxe:

    javascript
    import express from 'express';
    import express from 'express';

2. Configurer Node.js pour ES6 Modules

Si vous souhaitez utiliser la syntaxe import/from dans Node.js, voici les étapes à suivre :

  1. Assurez-vous d'utiliser Node.js v14 ou ultérieur.

  2. Dans votre projet, ouvrez ou créez un fichier package.json. Ajoutez (ou modifiez) le champ type pour qu'il ait la valeur module :

    json
    {
      "type": "module"
    }
    {
      "type": "module"
    }

Ceci indique à Node.js d'utiliser le système de modules ES6 pour tous les fichiers .js de votre projet.

3. Utilisation d'import/from dans Votre Projet

Avec la configuration ci-dessus, vous pouvez maintenant utiliser import/from dans vos fichiers .js :

javascript
// Importer le module fs comme exemple
import fs from 'fs';

// Utilisez le module comme d'habitude
fs.readFile('monFichier.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});
// Importer le module fs comme exemple
import fs from 'fs';

// Utilisez le module comme d'habitude
fs.readFile('monFichier.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

Astuce

Si vous devez importer un module qui utilise encore le format CommonJS :

  • Utilisez l'importation de liaison:

    javascript
    import * as express from 'express';
    import * as express from 'express';
  • Ou l'importation dynamique:

    javascript
    const express = await import('express');
    const express = await import('express');

4. Quoi utiliser dans vos projets ?

Si vous débutez un nouveau projet et que vous souhaitez bénéficier des avantages des modules ES6 (comme les imports statiques, l'analyse améliorée, etc.), allez-y et utilisez import/from. Cependant, soyez conscient que certains paquets npm peuvent toujours être en format CommonJS, donc vous devrez peut-être utiliser les deux méthodes d'importation.

Si vous travaillez sur un projet existant qui utilise déjà CommonJS, la migration vers ES6 peut nécessiter un effort considérable et ne pas apporter d'avantages immédiats. Évaluez les avantages et les inconvénients avant de décider.