Poznejte různé formáty javascriptových modulů

BY admin
|

Pokud jde o vytváření aplikace, pokud jste jako já, vždy se ptáte: jaký formát mám použít ? CJS ? AMD ? UMD ? ESM ? Jaké jsou mezi nimi rozdíly ? Proč tolik formátů?

Prostřednictvím tohoto článku se pokusím na tyto otázky odpovědět 😊.

#Různé formáty

#CommonJS (CJS)

Jedná se o jeden z prvních vytvořených formátů. Jsem si jistý, že jste ho již použili. Je to systém modulů, který původně inspiroval NodeJS.

Tento systém spočívá v importu a exportu modulů díky několika známým klíčovým slovům: require a exports. Objekt module.exports je skutečně specifický pro NodeJS.

 // utils.js // we create a function function add(r){ return r + r; } // export (expose) add to other modules exports.add = add; // index.js var utils = require('./utils.js'); utils.add(4); // = 8

Tým commonJS vytvořil toto rozhraní API jako synchronní, což není pro prohlížeče tak dobré… Navíc Commonjs není nativně srozumitelné pro prohlížeče; vyžaduje buď knihovnu loaderu, nebo nějakou transpilaci.

#Asynchronní definice modulů (AMD)

AMD je jakési rozdělení CommonJS. Vytvořili ji členové týmu CJS, kteří nesouhlasili se směrem, kterým se vydal zbytek týmu.

Rozhodli se vytvořit AMD pro podporu asynchronního načítání modulů. Jedná se o systém modulů, který používá RequireJS a který funguje na straně klienta (v prohlížečích).

 // add.js define(function() { return add = function(r) { return r + r; } }); // index.js define(function(require) { require('./add'); add(4); // = 8 }

Tento příklad funguje pouze v případě, že máte na svém webu requirejs. Můžete najít další příklady AMD.

#Universal Module Definition (UMD)

Jak jste asi pochopili, tyto dva formáty jsou bohužel vzájemně nesrozumitelné. Proto byl vytvořen UMD. Je založen na AMD, ale obsahuje některé speciální případy, které řeší kompatibilitu s CommonJS.

Naneštěstí tato kompatibilita přidává určitou složitost, která komplikuje čtení / zápis. Pokud chcete, můžete najít více šablon kódu UMD na tomto repozitáři github.

#ES2015 Modules (ESM)

Jelikož tyto 3 formáty nejsou tak snadno čitelné, špatně se analyzují pro statický analyzátor kódu a nejsou všude podporovány, rozhodl se tým ECMA (tým stojící za standardizací Javascriptu) vytvořit standard ECMAScript 2015 (známý také jako ES6).Tento formát je opravdu jednoduchý na čtení i zápis a podporuje synchronní i asynchronní režim práce.

 // add.js export function add(r) { return r + r; } // index.js import add from "./add"; add(4); // = 8

Moduly es lze navíc staticky analyzovat, což umožňuje nástrojům pro sestavování (jako je Webpack nebo Rollup) provádět nad kódem stromové analýzy. Tree-shaking je proces, který odstraňuje nepoužívaný kód ze svazků.

Naneštěstí má tento formát stále 2 nevýhody (ale zlepšují se):

  • ESM nepodporuje dynamicky importované moduly, ale již několik měsíců existuje návrh, který se začal implementovat v některých prohlížečích.
  • Není podporován ve všech prohlížečích, ale naštěstí to lze „napravit“ díky… transpilování !

#Transpilování

Transpilování je proces překladu jednoho jazyka nebo verze jazyka do jiného. Zde se tedy jedná o transpilování ES6 do ES5, aby se dosáhlo lepší podpory prohlížečů. bohužel tato transpilace má svou cenu, protože přidává nějaký kód navíc, aby se opravily chybějící funkce ES6, které v ES5 neexistují.

Nejznámější transpilátor, který se v tomto případě obvykle používá, je Babel.

#Další četba

Pokud chcete jít dál (prostřednictvím příkladů, vysvětlení atd.), abyste pochopili, jak tyto různé formáty fungují, zde je několik textů, které jsem našel a které mě inspirovaly:

  • JavaScript Module Systems Showdown:
  • Měli byste používat esm
  • Psaní modulárního JavaScriptu pomocí AMD, CommonJS & ES Harmony
  • Co je to AMD, CommonJS a UMD?
  • Modularizační techniky (je zde více stránek)
  • Stav modulů JavaScriptu