VSCode, npm a automatický build

Mám blbej dotaz kterej nemůžu nikde na netu najít :D

Mám npm package.json kde je:

A rád bych aby tento "build" byl proveden když uložím jakýkoliv soubor v aktuálním workspace ve VSCode. Vím že existují nějaké další rozšíření typu "Run on Save", což udělá jakýkoliv CMD při uložení nebo něco jako "nodemon myFile.js". Ale já hledám něco co je přímo implementováno v základním VSCode aby to bylo co nejjednodušší na nastavení/spuštění, určitě v roce 2023 musí být něco takového jednoduchého implementováno v čistém VS.

Odpovím si nakonec:

našel jsem na to skvělý modul npm-watch

s tím že při každém otevření projektu ji spustím takto:

Dobrá otázka,

již delší dobu se zabývám optimalizací mnou napsaného kódu. Píšu si svoje vlastní javascript funkce/moduly/třídy pro různé potřeby např.: slider, slideshow, vlastní galerie, ajax file upload, ajax contact form a k tomu používám i nějaké cizí práce například Zebra tooltips, Lightbox atd. Z toho vyplývá že je nutné v HTML kódu uvést třeba takových 10 JS souborů, to znamená že při načtení stránky se klientoví 10x stáhne javascript (10x request a zpracování požadvku přes HTTP).

A teď konečně k npm a Webpacku: Webpack mi dokáže všechny javascript soubory spojit v 1 javascript soubor, minifikovat ho a upravit kód aby byl ještě jednodušší a optimalizovanější. Odstraní například i kód který nedává smysl a nebyl by nikdy použit nebo spuštěn. Takže do html místo 10 scriptů vložím jen <script src="build.js"></script> a tím brutálně zmenším počet requestů při návštěvě uživatele webu. Takže když uložím některý js soubor v projektu tak se mi hned vygeneruje tento build.js se všemi JS scripty. Tohle je naprosté minimum co webpack umí, umí toho mnohem víc, viz webpack.js.org. Existují i další podobné nástroje, například: rollupjs.org nebo parceljs.org, babeljs.io.

Samozřejmě se dá namítnout že jako programátor si můžu všechen kód psát v jednom souboru, ať JS nebo třeba styly. Ale to je u větších projektů velmi neefektivní a velmi nepřehledné na budoucí úpravy a rozšíření, než propracovaná adresářová struktura několika souborů a jmenných prostorů které se poté vytvoří do jednoho souboru z důvodu optimalizace přes jmenovaný nástroj.

Keeehi:
Ano, napřed jsem v tom hledal složitosti přitom je to tak primitivní :D

Jo něco jako tvůj nabízený livereload již používám, savnu cokoliv ve workspace a v prohlížeči se mi to aktualizuje automaticky, moc super věc :)) Pak ještě nějaké další VSCode rozšíření například formátování kódu při uložení, našeptávač jQuery apod.. Super věci.

Mám nastaveno ve webpacku mode: 'development' což udělá míň úkonů než při produkci. A momentálně používám webpack jen na slepování javascriptů. SCSS si řeším jinými nástroji.

Z toho mi většinou vychází:

Nebo mi navrhneš mnohem lepší řešení?

Můžu se na něho kouknout v budoucnu, vidím že ViteJS používá přednastavený Rollup. Teď mi ale webpack vyhovuje, navíc ten develop mód to ani neminifikuje a nepřejmenovává, takže to můžu stále jednoduše debugovat ve vývoji.

To je otázka, ještě jsem se tak daleko bohužel nedostal abych řešil modulování.

Pro mě je to stále jen přechod z 10 scriptů na 1 z pohledu načítání/timeline webu. Problém který má v dnešní době stále hodně webů, například WordPress (který klidně načítá 30 scriptů bez modulování).
Webpack umí i split do více bundlů podle Dependency graph.

Dávám za pravdu že nejspíš existuji i lepší řešení, s použitím i CDNs. Ale nemám na to teď kapacitu do toho jít tak moc do hloubky.

Respektive modulování u webpacku řeším, nativním JS typu: import $ from 'jquery';

Str4wberry:
Nestandardní? Přímo v dokumentaci, rekompilování při každém uložení jakéhokoliv souboru při vývoji, sami zmiňují. Ačkoliv tedy používají "webpack --watch" což je možná lepší řešení, ale výsledek by měl být stejný, tedy build v development prostředí.

weroro:
🙏