Webpack, Babel, React-Router a AMD(dynamicke moduly) rubrika: Programování: JavaScript

2 Michal Zahradníček
položil/-a 10.2.2016
 
upravil/-a 12.2.2016

Zdravim,

chcem sa opýtať, že ako riešite dynamické nahrávanie modulov(skriptov) s týmito technológiami. Ide o to, že každá z nich má možnosť "spracovať" kód týkajúci sa tejto feature.

Máte niekto skúsenosti s touto kombináciou? Na ktorej úrovni riešite moduly?

--------- EDIT

Aby som to trocha spresnil, lebo bolo už dosť veľa hodín keď som to písal...

Mám nejaký základ SPA(core, UI, dashboard), ktorý sa načíta hneď z úvodu. A potom podľa toho ako bude uživateľ klikať, sa budú postupne, podľa potreby načítavať rôzne moduly. Napr. Správa používateľov, Kalendár, Dokumenty a pod...
Samozrejme, že jeden modul bude mať v zdrojákoch viacero súborov, ale po "skompilovaní"(Babelom, alebo Webpackom), by som z neho mal jeden .js súbor.

Komentáře

  • anti.cz : Tohle by me celkem zajimalo. Sice s AMD nedelam a Google na se kombinaci React a AMD taky moc netvari, ale nebylo by spatny o tom aspon neco malo vedet. — 11.2.2016
  • anti.cz : Tak jsem si to myslel dobre a to je to proc me to zajima :) Co jsem tak googlil, tak tahle kombinace se moc nepouziva. Asi bych to resil bud u Webpacku nebo u Babelu. Me spis zajima jak se to nastavi, protoze jesti to chapu ty musis ty moduly pri kompilaci nejak vyloucit a zkompilovat je bokem, aby nebyly v tom vyslednem souboru. Jen me tak napada kolik je tech modulu a jakou maji velikost? Nedalo by se to vyresit tak, ze je zkompilujes bokem budes je nacitat pres script async a kdyby uzivatel byl moc hr a hned klikal, tak si dat pred volani if defined(nebo asi elegantnejs dat si do hlavni componentDidMount volani action, ktera bude checkovat jestli jsou potrebne moduly if defined a pokud ne, tak patricnym buttonum dat disabled a nejaky ajax .gif tocitko a volat action dokud se vse nenacte). Nebo to nejak obalit pres requireJS + config typek to tady https://www.youtube.com/watch?v=v1wwuSmg4ro (confused coder #2) nejak resi, ale oni pisou v ES5 a nekompilujou. Popripade jeste tady to resi https://github.com/facebook/react/issues/28 — 12.2.2016
odkaz
6 vojta.tranta
odpověděl/-a 2.3.2016

No to není problém. Webpack tohle umí a je na to jenom potřeba udělat polyfil.
Ryan Florence na to má příklad https://github.com/ryanflorence/example-react-router-server-rendering-la..., který funguje krásně.
Já to na svém blogu taky hodlám použít https://github.com/vojtatranta/blog/blob/master/routes/index.js.

Webpack fakt reálně vytvoří podle asynchronních require více .js bundlů, která se pak naloadují, když je daný modul potřeba. Funguje to luxusně.

Komentáře

  • tdvorak : Ze zvědavosti, proč stavět blog nad tak těžkotonážníma technologiema? Díky. — 3.3.2016
  • anti.cz : oprava linku: https://github.com/ryanflorence/example-react-router-server-rendering-la... — 3.3.2016
  • skliblatik : @tdvorak a čo vy si predstavujete pod takým pojmom "těžkotonážní" ;) ? Co vidíš jako lightweight? — 3.3.2016
  • tdvorak : @skliblatik: Těžkotonážní: použít express, webpack, react, redux, react-router a celou tu tunu závislostí jen proto, abych vykreslil na stránce blogový zápisek. Lightweight řešení je podle mého static site generator (třeba jekyll). Chápu, že někdo si vytváří blogový systém pro zábavu a aby se něco naučil. Ale udržovat bych to nechtěl ani chvíli. — 3.3.2016
  • tdvorak : @skliblatik: pro zajímavost, u toho odkazovaného blogu / projektu: 798 adresářů v node_modules, 139M celkem, mnoho závislostí už teď zastaralých. Udržet takový blog aktuální a bezpečný bude vyžadovat násobně víc práce, než na něj psát texty. — 3.3.2016
  • messa : @tdvorak Zase pokud někdo dělá s reactem, webpackem apod. každý den a má to zvládnuté, tak moc nedává smysl psát blogísek v něčem jiném jen proto, aby to bylo "lehkotonážní". Z tohohle stacku se pomalu stává standard. Kdyby sis chtěl napsat skript pro pípnutí každých 30 minut, tak to taky uděláš desetiřádkovým skriptem, který použije hromadu technologií a nebudeš to řešit v assembleru, protože ten by na to měl stačit a ta hromada technologií umí i přehrávat HD video, což zrovna teď nepotřebuješ. — 3.3.2016
  • tdvorak : @Messa: totéž říkají lidé o wordpressu. A pak tu máme statisíce neaktualizovaných blogů, co šíří spam a malware. — 3.3.2016
  • Občan : Podival jsem se na ten Blog a zadny security problem tedy nevidim, ale kdyztak existuje kouzelne: npm install nsp --global && nsp check. — 3.3.2016
  • tdvorak : @Občan: já tam vidím řadu knihoven, které stihly zastarat. Provozovat blog na systému, který závisí na 800 knihovnách, bude nekonečný boj o záplatování a udržování aktuálních verzí. Pochopím to u aplikace, za kterou stojí team lidí a denně na ní pracují a nikdy se nezastaví. Ale je to případ osobního blogu? Jednou za čas napíšu článek a pak na blog měsíce nemyslím. Btw ten nsp - zkoušel si, zda opravdu dělá, co slibuje? Nainstaloval jsem schválně několik balíčků, o kterých nsp má tvrdit, že jsou děravé (zdroj) a přesto "No known vulnerabilities found". Já bych na to svůj server nevsadil. — 4.3.2016
  • vojta.tranta : @tdvorak: no tak je to blog pro vývojáře, tak by to měl být nějaký showcase, co se dá udělat. Jasně, kdybych dělal klasický blog, tak tam dám wordpress a stáhnu si téma a je to. Nicméně plně souhlasim, že je ryzí nesmysl použít tyhle technologie na blog. — 24.3.2016
  • vojta.tranta : @anti.cz díky — 24.3.2016

Pro plný přístup na Devel.cz se prosím přihlaste:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.

Aktuální otázky v rubrice Programování: JavaScript

Otázky uživatele Michal Zahradníček