Diskuze: Vložení ikon do projektu a programování do více souborů

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

JKtech

Člen

JKtech:13.10.2022 19:35

Ahoj,
pracuji na front end HTML5 video přehrávači, který se buildne nad html video elementem jako napříklat u přehrávače plyr.
Ideologie je, že pokud budu implementovat video přehrávač na nějaký web, tak pouze linknu script a css soubor, stejným způsobem fungují i textové editory, které se buildnou nad elemenem textarea nebo již zmíněné přehrávače.

Taky jsem si všiml, že se u těchto "větších projektů" se programuje do více souborů, ale pak "vypadne" jeden js soubor, který se importuje do html souboru.
Předpokládám, že to je řešené přes nějaký npm modul, který to buildne, zde vycházím právě z github repozitáře přehrávače plyr

Programuji v typescript s klasickým tsc kompilátorem, nepoužívám žadný framework, celý přehrávač je v jedné třídě

Zkusil jsem: Zatím jsem vždy ikony vkládal přes css, kdy jsem linkoval svg soubor, to sice fungovalo, ale vždy bylo potřeba mít všechny svg soubory, kdy se každý musel zvlášť stahovat

Chci docílit: Když jsem se koukal jak to mají ostatní přehrávače např. twitch nebo youtube, tak každá ikona je vložena pomocí svg elementu s atributem path, a nemyslím si, že by každou proměnnou ukládali v proměných a vkládali pomocí innerHTML.

U programování do více souborů vím, že můžu použít es6 moduly, ale u těch stejně stahujete všechny moduly separátně

Snad jsem to tady popsal nějak rozumně a budu rád za každou radu, klidně doporučte nějaké články nebo videa

Odpovědět

13.10.2022 19:35

Peter Mlich

Člen

Peter Mlich:14.10.2022 10:59

Svg jdou spojit do jednoho souboru a obrazky linkovat pres id.
Muzes vsechny svg zipnout a rozbalit na strane uzivatele.
Muzes svg prevest na jeden gif a v css pouzit vyrez pres position, jako se to delalo kdysi pro hover..
Muzes vybrane svg prevest do js kodu jako base64.

https://mlich.zam.slu.cz/…js-tanks.htm - aspon ve firefoxu to funguje, rotace hlavni je sipka doprava, doleva, strelba mezera

this.func.imgTank
        return '<svg><use xlink:href="tank3.svg#tank" width="'+w+'" x="-4" y="-56"></use></svg>';
this.func.imgExplossion
        return '<img src="boom.svg" alt="boom.svg" width="'+w+'">';
this.func.imgBarrel
        return '<svg width="'+c[2]+'" height="'+c[3]+'" stroke-width="'+w+'" stroke-linecap="round"><line x1="'+a.x+'" y1="'+a.y+'" x2="'+b.x+'" y2="'+b.y+'" stroke="black"/></svg>';

Nahoru Odpovědět

14.10.2022 10:59

JKtech

Člen

JKtech:21.10.2022 11:17

Děkuji za tipy, ale nakonec jsem našel co jsem hledal, pro lidi které by to zajímalo to stručně popíšu 😀 .
Pokud chcete vyexportovat celý projekt do jednoho JS souboru, a s tím svg ikony, css, json nebo typescript, tak můžete použít "balíkovač" s názvem webpack.

Český článek
Oficiální web

V mém případě s video přehrávačem, stačí pouze naimportovat js soubor ("bundle"), který je vygenerován webpackem, a vše funguje jak má.

Akceptované řešení
+5 Zkušeností

Nahoru Odpovědět

21.10.2022 11:17

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.