ECMAScript moduly: Co je schované za ?

Vzhůru dolů 30.03.2020 08:30 ES modul je soubor obsahující javascriptový kód, který se vkládá do jiného souboru, obsahujícího javascriptový kód. Definici máme hotovou, jdeme domů? Ještě počkejte, slibuji, že v článku půjdu více do hloubky. Moduly různých typů, jako CommonJS nebo AMD, se v praxi používají už dlouho, hlavně díky sestavovačům jako je Webpack, protože nativní podpora v prohlížečích byla až doteď nejistá a různorodá. Obrázek: Jak zhruba fungují javascriptové moduly? Drobí kód na malé kousky. Po přechodu MS Edge na jádro Chrome podporují ECMAScript moduly všechny prohlížeče kromě Internet Exploreru 11, takže je možné tuhle legraci používat skoro všude. S alternativním řešením pro IE11 nám znovu pomohou sestavovací nástroje. K tomu se dostaneme na konci článku. Teď si pojďme říct něco o samotných modulech. Úplné základy: export a import části kódu Klíčovým slovem export se označuje část kódu, která má být veřejně dostupná, importovatelná zvenčí. Vezměme, že si vytvoříme soubor module.js: export function foo function bar Veškerý kód v souboru platí standardně jen na úrovni modulu a nelze jej volat zvenčí. Pomocí klíčového slova export se pak část kódu „vystaví na veřejnost“. Dělá se tím jakési API tohoto modulu. Exportovat můžete všechny možné části kódu – function, class, let, nebo const – ale jen na nejvyšší úrovni zanoření. Import v jiném souboru Předpokládejme, že module.js bude knihovna, kterou používáme v našem hlavním souboru. Pojmenujme jej script.js: // Importujeme: import from './module.js'; // Pouzivame: foo ; Vysvětleme: Na druhém řádku importujeme funkci foo ze souboru module.js. Na čtvrtém řádku importovanou funkci voláme. Konzole prohlížeče nám tedy slavnostně vypíše řetězec foo. Pokud bychom ale například importovali funkci bar , prohlížeč by s námi nesouhlasil a v konzoli hlásil: _„The requested module './module.js' does not provide an export named 'bar'.“_No jistě, vždyť téhle funkci jsme pomocí klíčového slova exportnedovolili, aby byla veřejně dostupná. Voláme moduly z HTML Aby to ale celé fungovalo, musíme ještě vložit script.js do nějakého HTML kódu: Všimněte si onoho type="module". Říkáme tím prohlížeči, aby s kódem v JS zacházel jako s modulem. Pokud bychom to neuvedli, prohlížeč by se na nás zlobil a hlásil „Uncaught SyntaxError: Cannot use import statement outside a module“. Druhý soubor, module.js, na který se odkazujeme uvnitř script.js, si prohlížeč stáhne a vykoná sám, to už je jeho práce. Další možnosti importů a exportů Zpravidla chceme exportovat více než jednu část kódu modulu. Náš module.js tedy rozšíříme o konstantu: export const hello = 'Hello!'; Importovat pak do script.js můžeme konstantu i funkci tak, že je prostě oddělíme čárkou… import from './module.js'; Možností je ale více: Seznamy exportů V modulu není potřeba klíčové slovo export uvádět vícekrát. Stačí vypsat seznam toho, co exportujeme: export ; Hromadný import Pomocí znaku * je možné importovat všechny exportované prvky modulu: import * from './module.js'. _Přejmenování _Klíčovým slovem as je možné původní objekty přejmenovat a přidělit jim jmenný prostor. Importujeme pomocí import * as module from './module.js' a dále používáme např. jako module.foo . Výchozí exporty Náš module.js může mít nějaký výchozí výstup, označíme jej klíčovým slovem default. Například takto: export default function . Při importování je pak možné prostě jen uvést jméno pro importovaný modul: import myModule from './module.js'. Více příkladů hledejte v článcích, na které odkazuji na konci textu. Příklad se základním kódem najdete v Gistu. V čem se liší modul od klasického JavaScriptu? Pár rozdílů v chování , byť s odkazem na stejný soubor, musí se v prohlížečích znovu vyhodnotit. s inline kódem , ale funguje pro inline kód uvnitř Podpora a fallback Aktuálně podporují moduly z ECMAScript všechny prohlížeče kromě Internet Exploreru 11. Viz údaje na CanIUse.com. Obrázek: Podpora javascriptových modulů v prohlížečích. Zdroj: CanIUse Embed. To může někomu vadit natolik, že se do jejich používání nepustí. My ostatní tady máme tooling, nástrojařinu. Ve Webpacku je psaní modulů podle ECMAScript jednou z možností práce, dokonce doporučovanou. Parcel tuto syntaxi podporuje také. Můžeme psát kód moderním způsobem a nástroje nám exportují balíček kódu, který zvládnou staré prohlížeče. Nebo dva balíčky, jak teď uvidíte. Návrhový vzor module/nomodule Ve specifikaci na mechanismus pro náhradní řešení mysleli a vznikl atribut nomodule pro značku Vysvětlíme: Starší prohlížeče jako Internet Explorer neznají atribut type="module", proto soubor main.js nestáhnou a neprovedou. Moderní prohlížeče se zase vyhýbají kódu s atributem nomodule, takže ty zase nestáhnou soubor fallback.js. Prohlížeče, které neznají javascriptové moduly obvykle neumějí ani novější funkce jazyka jako jsou například „arrow“ funkce nebo async-await. Nic proti nim, ale tohle je jedna z jejich lepších vlastností. Této jejich schopnosti jde využít a nastavit si nástroje tak, aby produkovaly moderní kód pro moderní prohlížeče a pak kód opačné charakteristiky pro MSIE a spol. . Vzor module/nomodule má své nevýhody: Původní Microsoft Edge ve verzích 16-18 vykoná skript v module, takže kód pro moderní prohlížeče tam umístěný s tím musí počítat. Starší prohlížeče jako právě původní Edge nebo Safari 10 stáhnou soubor v module i nomodule. Dle mého je potřeba tyto problémy znát, ale nemusí to bránit v použití. Dvě stažení ve starém Edge a Safari nemusí zase tak vadit, když nám to umožní spouštět v moderních prohlížečích, tedy u většiny uživatelů, výrazně jednodušší kód. Více o nevýhodách vzoru module/nomodule najdete v textu Will it double-fetch? nebo Differential Serving na CSS-Tricks. Tímto bych text o ECMAScript modulech s dovolením ukončil. Pokud vás téma zajímá více, mrkněte se na následující zdroje. ECMAScript modules in browsers – rychlý úvod od Jake Archibalda. ES modules: A cartoon deep-dive a  ES6 In Depth: Modules – Mozilla Hacks. JavaScript modules na v8.dev – hlavně odtud jsem při psaní vycházel. ES6 v kostce – obecnější, ale český text. Autor děkuje Robinovi Pokornému a Michalovi Matuškovi za cenné připomínky k textu. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .