Quelle est la différence entre require et import dans JavaScript

Dans ce tutoriel, nous allons voir quelle est la différence entre  require et import dans JavaScript et répondre à certaines de ces questions courantes.

Avec le développement Web moderne, nous utilisons require ou import pour faire référence aux dépendances JavaScript.

 

Lire aussi: Comment choisir entre Fetch et Axios

 

Et, parfois, nous utilisons les deux en combinaison et utilisons ce qui fonctionne pour la bibliothèque.

Mais, savez-vous pourquoi les deux existent? Que se passe-t-il en dessous ? Et quelles sont les bonnes pratiques pour utiliser l’un ou l’autre ?

 

Types de modules JavaScript

Avant de voir require et import, il est nécessaire d’avoir une compréhension des modules JavaScript. Voyons donc quels sont les différents types de modules JavaScript disponibles.

1. AMD (Asynchronous Module Definition)

Les modules AMD ont été introduits pour rendre les modules plus conviviaux. Ils ne nécessitent aucun bundler et toutes les dépendances sont résolues dynamiquement.

La fonction use require d’AMD est utilisée pour charger des modules externes et est capable d’agir comme un wrapper pour les modules CommonJS.

define("exampleModule", [], () => {
   return {
     print: () => console.log("Hello World!");
   }
}
define("main", ["require", "exampleModule"], (require) => {
  const exampleModule= require("exampleModule");
  exampleModule.print(); 
});

Cependant, avec l’introduction des modules ES, l’utilisation d’AMD a considérablement diminué.

2. CommonJS Modules

CommonJS est le standard utilisé par NodeJS pour encapsuler des modules dans JavaScript. modules.export est utilisé pour exporter des modules CommonJS et la fonction import est utilisée pour inclure des modules dans des fichiers séparés.

Bien que les modules CommonJS soient largement utilisés dans NodeJS, ils ne sont pas utilisés dans le développement frontend.

 

La principale raison derrière cela est le comportement synchrone de la fonction require.

Lire aussi: Comment créer un intercepteur http en Angular ?

Cependant, NodeJS n’a commencé à prendre en charge les modules ES qu’à partir de la v13. Jusque-là, la plupart des modules NodeJS, y compris les bibliothèques NPM, étaient développés à l’aide de modules CommonJS.

Par conséquent, les modules CommonJS sont encore largement utilisés par les développeurs.

Et, les modules CommonJS sont tout aussi importants que les modules ES, et j’en discuterai davantage dans les prochaines sections de l’article.

3. UMD : Universal Module Definition

UMD est une combinaison d’AMD et de CommonJS. Il utilise la syntaxe de CommonJS et la technique de chargement asynchrone d’AMD pour le rendre adapté à la fois côté serveur et côté client.

UMD est utilisé comme module de secours dans les bundlers comme Webpack, et un exemple simple de module UMD est présenté ci-dessous :

(function (root, factory) {  if (typeof define === "function" && define.amd) {    define(["jquery"], factory); // AMD  } else if (typeof exports === "object") {    modules.export = factory(require("jquery")); //CommonJS  } else {    root.returnExports = factory(root.jQuery);  }
})(this, function ($) {  function exampleFunction() {}  return exampleFunction;});

4. ESM : ES Modules

ES Modules (ECMAScript Modules) est la norme officielle utilisée en JavaScript. Les modules ES utilisent les instructions import et export pour gérer les modules.

Il résout l’une des plus grandes limitations de CommonJS, qui est le chargement synchrone.

Les modules ES importent les modules de manière asynchrone tout en permettant une analyse statique au moment de la construction.

Il y a eu de nombreux débats parmi les développeurs après l’introduction des modules ES, compte tenu de la compatibilité avec CommonJS.

Cependant, les développeurs se sont adaptés pour utiliser les deux, et nous discuterons plus en détail dans les sections à venir.

Puisque maintenant vous comprenez les modules JavaScript, passons à la discussion sur require et import.

Require est intégré à NodeJS

require est généralement utilisé avec NodeJS pour lire et exécuter les modules CommonJS.

Ces modules peuvent être des modules intégrés comme http ou des modules écrits sur mesure. Avec require, vous pouvez les inclure dans vos fichiers JavaScript et utiliser leurs fonctions et variables.

// built-in moduels
const http= require('http');// local moduels
const getBlogName = require('./blogDetails.js')

Cependant, si vous utilisez require pour obtenir des modules locaux, vous devez d’abord les exporter à l’aide de modules.export.

Par exemple, supposons que vous ayez un fichier appelé blogDetails.js et que vous deviez utiliser une fonction de ce fichier dans le fichier index.js.

//blogDetails.js

const getBlogTitle = (name, author) => {
   return name + " by " + author;
}
modules.export = getBlogTitle;

//index.js
const getBlogTitle = require('./blogDetails.js');

var title = getBlogTitle ('Require vs Import in JavaScript', 'Chameera Dulanga');

Vous pouvez également exporter plusieurs modules à la fois en utilisant modules.export comme suit :

//blogDetails.js

const getBlogTitle = (name, author) => { 
   return name + " by " + author;
}
const getBlogContent = () => { 
   return content
}
modules.export = {
  getBlogTitle,
  getBlogContent,
};

Remarque : Au lieu d’utiliser modules.export à la fin, vous pouvez également ajouter export pour commencer à chaque fonction.

Par exemple : exports.getBlogContent = () => {} ;

Je pense que maintenant vous comprenez quand utiliser require et comment cela fonctionne.

Mais, avant d’entrer dans les caractéristiques uniques de require, voyons comment fonctionne import.

Ensuite, nous pourrons les comparer et les contraster avec un niveau de compréhension plus profond.

 

Import  a été introduit avec les modules ES6

import est un module ES, et avec export, ils sont connus sous le nom d’import et d’export ES6.

Nous ne pouvons pas utiliser import ou export en dehors des modules ES.

Nous pouvons voir qu’essayer d’utiliser import en dehors des modules ES est une erreur courante des développeurs, et il existe de nombreux threads StackOverflow à ce sujet.

Si je prends le même exemple, la seule modification que je dois apporter est de modifier modules.export pour exporter par défaut.

 

//blogDetails.js

const getBlogTitle = (name, author) => { 
   return name + " by " + author;
}

export default getBlogTitle;

Ensuite, nous pouvons utiliser import pour inclure ce fichier dans notre fichier index.js.

 

//index.js
import getBlogTitle from "./blogDetails.js";

var title = getBlogTitle ('Require vs Import in JavaScript', 'Chameera Dulanga');

Remarque : comme dans require, vous pouvez également exporter chaque fonction individuellement en ajoutant export à chaque définition de fonction.

Par exemple : export const = getBlogContent = () => {} ;

J’espère donc que vous comprenez maintenant comment et quand utiliser require et import. Mais ce n’est pas tout; il existe des différences significatives dans leur fonctionnalité et leur utilisation. L’heure est à la comparaison.

La différence entre require et import dans JavaScript

Les deux require et import dans JavaScript sont utilisés pour inclure des modules.

Mais ils ont plusieurs caractéristiques importantes que vous devez connaître.

1. Les instructions Require peuvent être appelées n’importe où dans le code

Habituellement, nous appelons les instructions import ou require au début d’un fichier.

Mais saviez-vous que vous avez la liberté d’utiliser des instructions require n’importe où dans votre code ? Oui, vous pouvez!

En revanche, les instructions import ne peuvent être définies qu’au début du fichier.

Définir une instruction d’importation ailleurs vous donnera une erreur ou passera automatiquement au début du fichier.

2. Require peut être appelé conditionnellement

L’instruction require vous permet de charger des modules de manière conditionnelle ou dynamique lorsque le nom du module chargé n’est pas prédéfini.

Par exemple, vous pouvez appeler require dans une fonction ou une condition if comme ci-dessous :

if(articleCount>0){
   const getBlogTitle = require(‘./blogDetails.js’);
}

 

Les instructions require ont cette flexibilité car elles sont traitées comme des fonctions. Ils sont appelés au moment de l’exécution, et il n’y a aucun moyen de savoir quoi que ce soit avant cela.

Mais, les instructions import sont statiques et nous ne pouvons pas les utiliser de manière conditionnelle ou dynamique.

Remarque : Vous pouvez voir cela comme un avantage de require.

Mais, comme les instructions import sont statiques, vous pouvez détecter toute erreur avant d’exécuter l’application.

3. Les instructions import sont asynchrones

Être synchrone ou asynchrone peut ne pas jouer un rôle majeur dans les applications à petite échelle.

Mais, si l’on pense aux applications à grande échelle, il y a des centaines de modules qui sont utilisés. Donc,

si vous utilisez require, les modules seront chargés et traités un par un.

D’un autre côté, les instructions import résolvent ce problème en travaillant de manière asynchrone, et elles sont connues pour fonctionner bien par rapport aux fonctions requises dans les applications à grande échelle.

4. Les modules ES sont l’avenir

Comme nous en avons discuté, le système de module ES a été introduit en tant que standard pour maintenir les modules JavaScript côté client.

Il est également adopté par TypeScript avec des ajouts pour définir le type.

Par conséquent, je ne pense pas que require puisse à nouveau remplacer ES, car il est devenu un standard largement utilisé par les développeurs.

Mais comme il existe de nombreux modules et bibliothèques NodeJS écrits avec CommonJS, nous ne pouvons pas laisser entièrement de côté les besoins.

Nous devons donc utiliser les deux en conséquence.

De plus, nous pouvons configurer des compilateurs pour convertir différents types de modules de sortie.

Si vous utilisez TypeScript, vous pouvez cibler différents systèmes de modules comme sortie en apportant quelques modifications au fichier tsconfig.json.

Par exemple, supposons que nous devons sortir une version de code qui utilise CommonJS.

Tout ce que vous avez à faire est de créer un nouveau fichier tsconfig pour la sortie CommonJS en étendant le fichier tsconfig d’origine et en modifiant le paramètre du module sous CompilerOptions.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "./lib/cjs"
  },
}

 

Remarque : vous pouvez également utiliser des outils de génération tels que Webpack pour convertir les modules ES en modules CommonJS.

En plus de ces différences significatives, il y a quelques changements mineurs de syntaxe entre eux. J’ai donc créé une comparaison infographique résumant tout ce qui est discuté dans l’article pour comprendre clairement les différences entre exiger et importer.

 

 

Conclusion

Dans cet article, j’ai abordé une question commune à de nombreux développeurs : la différence entre require et import dans JavaScript.

Bien que l’import et l’export ES soient les nouvelles normes utilisées pour inclure des modules, les fonctions require sont largement utilisées dans NodeJS.

 

Ainsi, comprendre la différence entre require et import dans JavaScript et leur utilisation vous aidera à minimiser les erreurs indésirables dans votre application.

 

Merci pour la lecture !!!