Maison >interface Web >js tutoriel >Node.js : un bref historique de cjs, bundlers et esm

Node.js : un bref historique de cjs, bundlers et esm

Mary-Kate Olsenoriginal: 2024-12-15 05:36:10390parcourir

Node.js: A brief history of cjs, bundlers, and esm

Introduction

Si vous êtes un développeur Node.js, vous avez probablement entendu parler des modules cjs et esm, mais vous ne savez peut-être pas pourquoi il y en a deux et comment ils coexistent dans les applications Node.js. Cet article de blog vous guidera brièvement à travers l'historique des modules JavaScript dans Node.js (avec des exemples ?) afin que vous puissiez vous sentir plus en confiance face à ces concepts.

La portée mondiale

Au départ, JavaScript n'avait qu'une portée globale où tous les membres étaient déclarés. Cela posait problème lors du partage de code car deux fichiers indépendants pouvaient utiliser le même nom pour un membre. Par exemple :

salut-1.js

function greet(name) {
  return `Hello ${name}!`;
}

salut-2.js

var greet = "...";

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Collision example</title>
  </head>
  <body>
    <!-- After this script, `greet` is a function -->
    <script src="greet-1.js"></script>

    <!-- After this script, `greet` is a string -->
    <script src="greet-2.js"></script>

    <script>
        // TypeError: "greet" is not a function
        greet();
    </script>
  </body>
</html>

Modules CommonJS

Node.js a formellement introduit le concept de modules JavaScript avec CommonJS (également connu sous le nom de cjs). Cela a résolu le problème de collision des portées globales partagées puisque les développeurs pouvaient décider quoi exporter (via module.exports) et importer (via require()). Par exemple :

src/greet.js

// this remains "private"
const GREETING_PREFIX = "Hello";

// this will be exported
function greet(name) {
  return `${GREETING_PREFIX} ${name}!`;
}

// `exports` is a shortcut to `module.exports`
exports.greet = greet;

src/main.js

// notice the `.js` suffix is missing
const { greet } = require("./greet");

// logs: Hello Alice!
console.log(greet("Alice"));

paquets npm

Le développement Node.js a explosé en popularité grâce aux packages npm qui permettaient aux développeurs de publier et de consommer du code JavaScript réutilisable. Les packages npm sont installés par défaut dans un dossier node_modules. Le fichier package.json présent dans tous les packages npm est particulièrement important car il peut indiquer à Node.js quel fichier est le point d'entrée via la propriété "main". Par exemple :

node_modules/greeter/package.json

{
  "name": "greeter",
  "main": "./entry-point.js"
  // ...
}

node_modules/greeter/entry-point.js

module.exports = {
  greet(name) {
    return `Hello ${name}!`;
  }
};

src/main.js

// notice there's no relative path (e.g. `./`)
const { greet } = require("greeter");

// logs: Hello Bob!
console.log(greet("Bob"));

Regroupeurs

Les packages npm ont considérablement accéléré la productivité des développeurs en étant capables de tirer parti du travail d'autres développeurs. Il présentait cependant un inconvénient majeur : cjs n’était pas compatible avec les navigateurs web. Pour résoudre ce problème, le concept des bundlers est né. browserify a été le premier bundler qui fonctionnait essentiellement en traversant un point d'entrée et en "regroupant" tout le code require()-ed dans un seul fichier .js compatible avec les navigateurs Web. Au fil du temps, d’autres bundles dotés de fonctionnalités et de différenciateurs supplémentaires ont été introduits. Notamment webpack, parcel, rollup, esbuild et vite (par ordre chronologique).

Modules ECMAScript

À mesure que les modules Node.js et cjs devenaient courants, les responsables de la spécification ECMAScript ont décidé d'inclure le concept de module. C'est pourquoi les modules JavaScript natifs sont également appelés ESModules ou esm (abréviation de modules ECMAScript).

esm définit de nouveaux mots-clés et une nouvelle syntaxe pour l'exportation et l'importation de membres et introduit de nouveaux concepts comme l'exportation par défaut. Au fil du temps, les modules esm ont acquis de nouvelles fonctionnalités telles que l'importation dynamique() et l'attente de niveau supérieur. Par exemple :

src/greet.js

function greet(name) {
  return `Hello ${name}!`;
}

src/part.js

var greet = "...";

src/main.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Collision example</title>
  </head>
  <body>
    <!-- After this script, `greet` is a function -->
    <script src="greet-1.js"></script>

    <!-- After this script, `greet` is a string -->
    <script src="greet-2.js"></script>

    <script>
        // TypeError: "greet" is not a function
        greet();
    </script>
  </body>
</html>

Au fil du temps, esm a été largement adopté par les développeurs grâce aux bundles et aux langages comme TypeScript puisqu'ils sont capables de transformer la syntaxe esm en cjs.

Interopérabilité Node.js cjs/esm

En raison de la demande croissante, Node.js a officiellement ajouté la prise en charge d'esm dans la version 12.x. La rétrocompatibilité avec cjs a été obtenue comme suit :

Node.js interprète les fichiers .js comme des modules cjs à moins que package.json ne définisse la propriété "type" sur "module".
Node.js interprète les fichiers .cjs comme des modules cjs.
Node.js interprète les fichiers .mjs comme des modules esm.

En ce qui concerne la compatibilité des packages npm, les modules esm peuvent importer des packages npm avec des points d'entrée cjs et esm. Cependant, le contraire s’accompagne de quelques réserves. Prenons l'exemple suivant :

node_modules/cjs/package.json

// this remains "private"
const GREETING_PREFIX = "Hello";

// this will be exported
function greet(name) {
  return `${GREETING_PREFIX} ${name}!`;
}

// `exports` is a shortcut to `module.exports`
exports.greet = greet;

node_modules/cjs/entry.js

// notice the `.js` suffix is missing
const { greet } = require("./greet");

// logs: Hello Alice!
console.log(greet("Alice"));

node_modules/esm/package.json

{
  "name": "greeter",
  "main": "./entry-point.js"
  // ...
}

node_modules/esm/entry.js

module.exports = {
  greet(name) {
    return `Hello ${name}!`;
  }
};

Ce qui suit fonctionne très bien :

src/main.mjs

// notice there's no relative path (e.g. `./`)
const { greet } = require("greeter");

// logs: Hello Bob!
console.log(greet("Bob"));

Cependant, les éléments suivants ne parviennent pas à s'exécuter :

src/main.cjs

// this remains "private"
const GREETING_PREFIX = "Hello";

// this will be exported
export function greet(name) {
  return `${GREETING_PREFIX} ${name}!`;
}

La raison pour laquelle cela n'est pas autorisé est que les modules esm autorisent une attente de niveau supérieur alors que la fonction require() est synchrone. Le code pourrait être réécrit pour utiliser Dynamic Import(), mais comme il renvoie une promesse, il oblige à avoir quelque chose comme ce qui suit :

src/main.cjs

// default export: new concept
export default function part(name) {
  return `Goodbye ${name}!`;
}

Pour atténuer ce problème de compatibilité, certains packages npm exposent à la fois les points d'entrée cjs et mjs en exploitant la propriété "exports" de package.json avec des exportations conditionnelles. Par exemple :

node_modules/esm/entry.cjs :

// notice the `.js` suffix is required
import part from "./part.js";

// dynamic import: new capability
// top-level await: new capability
const { greet } = await import("./greet.js");

// logs: Hello Alice!
console.log(greet("Alice"));

// logs: Bye Bob!
console.log(part("Bob"));

node_modules/esm/package.json :

{
  "name": "cjs",
  "main": "./entry.js"
}

Remarquez comment "main" pointe vers la version cjs pour une compatibilité ascendante avec les versions de Node.js qui ne prennent pas en charge la propriété "exports".

Conclusion

C'est (presque) tout ce que vous devez savoir sur les modules cjs et esm (en décembre 2024 ?). Faites-moi part de vos réflexions ci-dessous !

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!

JavaScript typescript json ecmascript html npm webpack if for include require Conditional Property JS function default this promise history Other

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment puis-je obtenir le texte sélectionné dans une liste déroulante à l'aide de jQuery ?Article suivant：Comment puis-je obtenir le texte sélectionné dans une liste déroulante à l'aide de jQuery ?

Articles Liés

Voir plus