Są to dwa systemy modułów JavaScriptu do dzielenia kodu na pliki.
Dlaczego to ważne
js
// import / export, used in browsers and modern Node
import { sum } from "./math.js";
import defaultThing ;
x = ;
() {};
Są to dwa systemy modułów JavaScriptu do dzielenia kodu na pliki.
// import / export, used in browsers and modern Node
import { sum } from "./math.js";
import defaultThing ;
x = ;
() {};
const { sum } = require("./math");
module.exports = { x: 1 };
| ES Modules | CommonJS | |
|---|---|---|
| Składnia | import/export | require/module.exports |
| Ładowanie | statyczne, asynchroniczne | dynamiczne, synchroniczne |
| Analizable | ✅ → tree-shaking | ❌ trudniejsze |
| Bindings | live (read-only) | skopiowana wartość |
this na górze | undefined | module.exports |
Statyczne oznacza, że importy ESM są znane w czasie parsowania, co pozwala bundlerom na tree-shaking (usunięcie nieużywanych eksportów). require CommonJS jest dynamiczny (możesz warunkowo require), więc nie da się go analizować tak łatwo.
{ "type": "module" } // in package.json, or use the .mjs extension
Nie możesz require() pakietu tylko ESM z CommonJS; mieszanie tych dwóch ma ostre krawędzie. Importy ESM to także live bindings — jeśli eksporter zmieni wartość, importerzy zobaczą nową wartość (CJS daje ci kopię snapshotu).
ESM to przyszłość (natywny dla przeglądarki, tree-shakeable, top-level await).
Preferuj go dla nowego kodu; rozumiej CJS, ponieważ duża część ekosystemu Node'a go wciąż używa.