Igrarije s Javascript bibliotekama

Ah te Javascript biblioteke, neodoljivo podsećaju na leptire. Egzotične, raznolike a obično im je i životni vek približne dužine!

Ovom prilikom neću govoriti o roku trajanja JS biblioteka, već o nečemu drugom. Dalje u nastavku..

Pre neki dan naidjoh na zanimljivu mathjs biblioteku. Nju neću puno objašnjavati (mada nije teško zaključiti iz njenog imena o čemu se radi), već ću se osvrnuti na neke od načina kako je koristiti u svom js projektu. Naravno ovakav pristup važi i za bilo koju drugu biblioteku. Postoji nekoliko načina, pa da krenemo od početka.

Skidanje fajla i ubacivanje linka

Skinuo sam fajl sa (https://mathjs.org) i prebacio ga u root folder svog projekta. Nakon toga sam u index.html fajl dodao link ka math.min.js fajlu.

Dodao mathjs funkciju u svoj index.js

Pokrenuo u browseru. I radi! :)

Ovaj jednostavan način skidanja fajlova i ubacivanja linkova ka njima u svom html fajlu, ume da postane naporan kada treba tražiti određene biblioteke po netu, i svaku skidati i linkovati posebno.

Preko npm-a

Pošto ja imam node.js i npm instaliran na svojoj mašini pokrenuću komandu nmp init koja će nakon par pitanja kreirati konfiguracioni package.json fajl koji će sadržati informacije vezane za projekat. Zatim cu preko komandne linije (u package manager-ima se uglavnom sve radi preko nje) instalirati math.min.js

npm install mathjs

Nakon ove komande mogu videti da je u mom package.json fajlu u dependencies dodat mathjs

Sada umesto starog linka ću ubaciti novi ka nod modulima gde se mathjs sada nalazi.

I sve ponovo radi! :)

package.json fajlovi su veoma korisni, zato sto se ogromni node_modules folder moze lako deliti izmedju vise ljudi bez deljenja tog foldera (dovoljan je package.json i nakon npm install komande svi paketi će biti instalirani). Ono što može da bude naporno jeste traženje paketa po folderu u kom se nalaze node moduli i ubacivanje linkova do njih.

Preko Webpack-a

Ovakav način podrazumeva kreiranje jednog krajnjeg fajla u kojem će bit upakovani svi ostali fajlovi. Ovo se može uraditi i preko Rollup ili Parcela (nećemo sad o njima), ali ja ću pokušati korišćenjem Webpack-a. Hajde da probamo koristeći import sintaksu.

Hmm, browser ne prepoznaje import i zato će nam trebati webpack koji će izbandlovati sve fajlove u kojima se nalazi import u poseban novi fajl koji će browser umeti da pročita. Da probamo...

Instaliraću webpack komandom npm install --save-dev webpack kao i webpack-cli koji omogućava korišćenje webpack-a iz komandne linije npm install --save-dev webpack-cli (oni su i sami npm paketi). Nakon instalacije oba paketa ce biti vidljiva u package.json fajlu.

Ručno ću napraviti konfiguracioni webpack fajl za instrukcijama za ulazni i izlazni fajl

I dodati komandu za skriptu u package.json-u koja će kreirati jedan finalni fajl spreman za browser.

Nakon pokretanja komande npm run build iz komandne linije, mogu da primetim kreiran dist/main.js fajl u root folderu moje aplikacije. Link ka njemu ću staviti u moj index.html fajl

i probati ponovo.

Ovoga puta nema error-a. Dodao bih još samo da je ovo i način koji je preporučljiv, a jedan od razloga je što varijable u modulima imaju takozvani lexical scope u odnosu na globalni koji imamo u klasičnim skriptama.