nécessiter Vs import en JavaScript

Je me souviens que lorsque j'ai commencé à coder, je voyais des fichiers js utilisant require() pour importer des modules et d'autres fichiers à l'aide de l'importation. Cela m’a toujours dérouté car je ne comprenais pas vraiment quelle était la différence ni pourquoi il y avait des incohérences entre les projets. Si vous vous demandez la même chose, continuez à lire !

Qu’est-ce que CommonJS ?

CommonJS est un ensemble de standards utilisés pour implémenter des modules dans JavaScript côté serveur, principalement dans les environnements Node.js. Dans ce système, les modules sont chargés de manière synchrone, ce qui signifie que l'exécution du script est bloquée jusqu'à ce que le module soit chargé. Cela constitue une approche simple, mais l'inconvénient est une perte de performances si vous essayez de charger un tas de modules différents, car ils devraient se charger les uns après les autres avant que quoi que ce soit d'autre puisse s'exécuter.

Lorsque vous utilisez CommonJS, vous utiliserez module.exports pour exporter les fonctionnalités et utiliserez require() pour les importer.

Voici un exemple de ce à quoi cela ressemblerait dans le code.

// In file multiple.js

module.exports = function multiply(x, y) {
    return x * y;
};

// In file main.js

const multiply = require(‘./multiply.js’);

console.log(multiply(5, 4)); // Output: 20

Qu'est-ce qu'ECMAScript (ES6) ?

ES6, également connu sous le nom d'ECMAScript, est une version plus récente de JavaScript publiée en 2015. Cette version a permis d'importer des modules de manière asynchrone à l'aide des instructions d'importation et d'exportation. Cela signifie que le script que vous exécutez peut continuer à s'exécuter pendant le chargement du module afin qu'il n'y ait pas de goulot d'étranglement. Cela permet également une efficacité appelée tree-shaking que j'aborderai dans un article ultérieur, mais fondamentalement, cela signifie que vous chargez uniquement en JavaScript à partir d'un module que vous utilisez et que le code mort (code non utilisé) n'est pas chargé. dans le navigateur. Tout cela est possible car ES6 prend en charge les importations statiques et dynamiques.

Voici le même exemple d'avant, mais cette fois, nous utilisons l'importation et l'exportation.

// In file multiply.js

export const multiply = (x, y) => x * y;

// In file main.js

import { multiply } from ‘./multiply.js’;

console.log(multiply(5, 4)); // Output: 20

Les principales différences : nécessiter une importation Vs

require() fait partie du système de modules CommonJS tandis que l'importation fait partie du système de modules ES6. Vous verrez require() utilisé dans les environnements Node.js pour le développement côté serveur, principalement sur des projets existants qui n'ont pas encore adopté ES6. Vous verrez l'importation utilisée à la fois dans le développement côté serveur et front-end, en particulier dans les projets les plus récents et avec l'un des frameworks front-end comme React ou Vue.

Pourquoi est-il préférable d’importer plutôt que d’exiger ?

Comme nous l'avons mentionné précédemment, l'importation est asynchrone, ce qui peut conduire à de meilleures performances, en particulier dans les applications volumineuses. De plus, étant donné que l'importation peut être analysée de manière statique, des outils tels que les linters et les bundlers peuvent optimiser le code plus efficacement et implémenter un tremblement d'arborescence, ce qui conduit à des tailles de bundles plus petites et à des temps de chargement plus rapides. La syntaxe est également plus facile à lire que require(), ce qui permet une meilleure expérience de développement, et nous le voulons tous !

Quand utiliseriez-vous require Vs import

Vous utiliseriez require() quand :

• Vous travaillez sur un ancien projet Node.js qui a été démarré avant la sortie d'ES6 et qui n'a pas été mis à jour.

• Vous devez charger dynamiquement les modules au moment de l'exécution, par exemple dans un fichier de configuration, ou si vous devez charger des modules de manière conditionnelle.

Vous utiliseriez l'importation lorsque :

• À tout autre moment car c'est la norme désormais et plus efficace.

Résumé

En général, il est recommandé d'utiliser l'importation autant que possible, car elle offre plus d'avantages et constitue le système de modules le plus récent et le plus largement adopté. Cependant, il peut y avoir des cas où require() reste le meilleur choix, en fonction de vos besoins spécifiques et de l'environnement dans lequel vous travaillez.

Si vous avez trouvé cet article utile, abonnez-vous à ma newsletter où j'enverrai plus de contenu comme celui-ci directement dans votre boîte de réception chaque semaine !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!