- Naršyklės neturi vietinio palaikymo „Node“ funkcijai „require“, todėl „CommonJS“ stiliaus „npm“ moduliai negali veikti tiesiogiai kliento pusės „JavaScript“.
- „Browserify“ analizuoja įvesties failą, pvz., main.js, seka visus „require“ iškvietimus ir sujungia visas priklausomybes į vieną naršyklei paruoštą „JavaScript“ failą.
- Diegiant modulius tokiomis komandomis kaip „npm install uniq“, „Browserify“ gali išgauti paketus iš „node_modules“ ir įterpti juos į sugeneruotą „bundle.js“.
- Įtraukus „bundle.js“ per standartinę scenarijaus žymę HTML, npm pagrindu veikiantis modulinis kodas sklandžiai vykdomas naršyklėje kaip vienas optimizuotas išteklius.
Kai pradedate dirbti su „JavaScript“ moduliais, vienas pirmųjų iššūkių, su kuriuo susiduriate, yra skirtumas tarp to, kaip „Node.js“ įkelia kodą, ir kaip tai daro naršyklės. „Mazde“ tiesiog skambinate require() ir viskas stebuklingai susijungia. Tačiau pabandykite tą patį tiesiogiai naršyklėje ir greitai suprasite, kad šios funkcijos ten tiesiog nėra. Būtent čia į pagalbą ateina įrankiai, darbo eigos ir koncepcijos, susijusios su npm paketų naršykle ir tokiais paketų rengikliais kaip „Browserify“, kad išgelbėtų dieną.
Šiame straipsnyje paaiškinama, kaip „npm“ kaip paketų ekosistema dera su šių paketų naršymo, atradimo ir galiausiai sujungimo idėja, kad jie iš tikrųjų veiktų žiniatinklio naršyklėje. Mes dar kartą apžvelgsime klasikinį „Browserify“ pavyzdį ir paaiškinsime, kodėl require veikia „Node“, bet ne naršyklėje, ir žingsnis po žingsnio parodysime, kaip pereiti nuo mažo scenarijaus failo prie vieno sujungto išteklių rinkinio, kurį galite įkelti į tinklalapį naudodami paprastą scenarijaus žymę. Be to, pateiksime kontekstą, praktinių patarimų ir keletą modernių alternatyvų, kad visa darbo eiga būtų prasminga realiuose projektuose.
Suprasti skirtumą tarp „Node.js“ ir naršyklės
Svarbiausia atspirties taškas yra tas, kad žiniatinklio naršyklės ir „Node.js“ iš karto siūlo labai skirtingas modulių sistemas. „Mazdas“ istoriškai naudojo „CommonJS“ modulio formatą, kuriame priklausomybės įkeliamos naudojant require('package-name') ir atskleisti funkcionalumą su module.exportsŠis modelis yra giliai integruotas į „Node“ vykdymo aplinką, tačiau tradicinės naršyklės apie jį nieko nežino.
Paprastoje naršyklės aplinkoje nėra integruoto require funkcija, taip pat nėra palaikymo „CommonJS“ stiliaus moduliams, kuriais remiasi dauguma npm paketų. Naršyklė supranta klasikines scenarijų žymas, kurios įkelia „JavaScript“ failus visame pasaulyje, o modernesnėse aplinkose palaiko ES modulius su type="module" atributas, bet jis vis tiek pats savaime nesupranta „Node“ „CommonJS“ semantikos.
Šis skirtumas tampa problema, kai tik bandote pakartotinai panaudoti „Node“ stiliaus kodą arba „npm“ paketus tiesiai kliento pusės „JavaScript“ kode. Galbūt turite paprastą fragmentą, pvz. var unique = require('uniq') tai puikiai veikia „Node“ scenarijuje, bet jei tą pačią eilutę įklijuosite į naršyklėje įkeltą failą, iš karto gausite nuorodos klaidą, nes require nėra apibrėžtas.
Todėl kūrėjams reikia tam tikro „tilto“, kuris leistų jiems toliau rašyti pažįstamą „Node“ tipo kodą, tuo pačiu metu pristatant su naršykle suderinamus išteklius. Tas tiltas paprastai yra paketų kūrėjas: įrankis, kuris nuo įrašo failo peržiūri jūsų priklausomybių grafiką, surenka viską, ko reikia, ir išveda vieną „JavaScript“ paketą, kurį naršyklė gali vykdyti nieko nežinodama apie „Node“ ar „npm“.
Ką „Browserify“ veikia npm ekosistemoje
„Browserify“ yra viena iš ankstyvųjų ir įtakingiausių įrankių, išsprendusių būtent šį iššūkį „JavaScript“ kūrėjams. Jo tikslas paprastas: leisti jums rašyti kodą naudojant „Node“ require modelį, įtraukite modulius iš npm ir visa tai supakuokite į vieną failą, kuris veikia naršyklėje taip, tarsi „CommonJS“ būtų palaikoma iš pradžių.
Žvelgiant iš npm paketų naršymo perspektyvos, „Browserify“ milžinišką „Node“ paketų ekosistemą paverčia potencialių kliento pusės priklausomybių biblioteka. Užuot rankiniu būdu kopijavę scenarijus, tiesiog įdiekite modulį iš npm, naudokite require() kaip ir serverio pusės kode, ir pasikliaukite „Browserify“, kad išverstumėte tai į tai, ką jūsų vartotojų naršyklės gali suprasti.
Viduje „Browserify“ peržiūri visus modulius, į kuriuos nurodoma per require, pradedant nuo nurodyto įrašo failo, ir sukuria priklausomybių grafiką. Kiekvienam to grafiko moduliui kodas perrašomas į formą, kuri emuliuoja „CommonJS“ aplinką naršyklėje, įskaitant vietinį taikymo srities nustatymą ir naršyklei pritaikytą sąsają. require įgyvendinimas. Galutinis artefaktas yra vienas paketinis failas, paprastai vadinamas bundle.js, kuris apima visus šiuos modulius.
Galutinis rezultatas – darbo eiga, kurioje priekinių sistemų kūrėjai gali pasikliauti „npm“ paketais, nesijaudindami dėl naršyklės nepalaikomo „Node“ modulių. Gaunate prieigą prie didžiulio bibliotekų katalogo, skirto tokioms užduotims kaip duomenų manipuliavimas, pagalbinės priemonės ar vartotojo sąsajos pagalbinės priemonės, tačiau klientui vis tiek pateikiamas tik vienas scenarijaus failas, sklandžiai integruojantis į tradicinius HTML puslapius.
Klasikinio „Browserify“ mokymo pavyzdžio perrašymas
Kad viskas būtų konkretu, įsivaizduokite, kad turite vieną „JavaScript“ failą pavadinimu main.js savo projekte ir norite naudoti npm paketą, vadinamą uniq , kad iš masyvo filtruotumėte pasikartojančias reikšmes. „Mazgo“ aplinkoje failą pradėtumėte tokia eilute kaip var unique = require('uniq')Ši eilutė importuoja eksportuotą funkciją iš uniq modulį ir saugo jį kintamajame, vadinamame unique.
Šio viduje main.js failą, galite sukurti paprastą skaičių masyvą, kuriame būtų pasikartojantys įrašai. Pavyzdžiui, galite nustatyti var data = , kur tam tikri skaičiai pasirodo daugiau nei vieną kartą. Tikslas yra sukurti naują masyvą, kuriame kiekvienas skaičius būtų tik vieną kartą, surūšiuota tvarka.
Naudojant importuotą funkciją, likusi kodo dalis tampa labai paprasta. Galite iškviesti console.log(unique(data)) kad konsolėje būtų atspausdintas masyvas, kurį grąžino uniq paketą, kuris pašalina pasikartojančias reikšmes iš sąrašo. Jei paleisite tai „Node“, pamatysite išvesties masyvą, kuriame kiekvienas skaičius pasirodo tik vieną kartą.
Visa ši logika daro prielaidą, kad uniq modulis yra prieinamas jūsų aplinkoje ir kad require Funkcija yra apibrėžta ir gali ją išspręsti. „Mazde“ tai tvarko vykdymo aplinka ir Mazgo modulio skiriamosios gebos algoritmas, kuris ieško katalogo pavadinimu node_modules ir tada aplankui, pavadintam uniq jo viduje.
„Uniq“ paketo diegimas iš npm
Prieš iškviečiant kodą require('uniq'), jums reikia įdiegti paketą iš npm registro. Tai atliekama komandinėje eilutėje naudojant „npm“ klientą, kuris yra komplektuojamas su „Node.js“. Savo projekto aplanke galite paleisti tokią komandą: npm install uniq kad npm atsisiųstų modulį ir išsaugotų jį aplanke node_modules katalogas.
Geriausios npm install uniq instrukcija nuskaito paskelbtą versiją uniq paketą ir prideda jį prie jūsų vietinio projekto priklausomybių. Priklausomai nuo jūsų npm konfigūracijos ir nuo to, ar naudojate package.json failą, jis taip pat gali įrašyti paketą į jūsų priklausomybių sąrašą, užtikrindamas nuoseklų diegimą skirtingose aplinkose kitiems jūsų komandos kūrėjams.
Įdiegus paketą, jūsų projekto katalogų struktūroje yra naujas node_modules/uniq aplanką, kuriame yra to paketo kodas. Būtent tai leidžia „Node“ require sistema, kad surastų modulį, kai jis išspręs problemą 'uniq'Tą patį aplanką „Browserify“ tikrins, kai pradės kurti jūsų paketo priklausomybių grafiką.
Šiuo metu jūsų main.js Failas yra visiškai galiojantis „Node“ kodas, kurį galima vykdyti serveryje arba terminale naudojant standartinį „Node“ interpretatorių. Tačiau, jei tiesiog numesite tai main.js Jei į tinklalapį įdedate failą naudodami scenarijaus žymę, jūsų naršyklė vis tiek nesupras šio „CommonJS“ stiliaus importavimo, todėl reikia atlikti papildomą veiksmą, kad jis būtų paruoštas naršyklei.
„main.js“ ir jo priklausomybių sujungimas į „bundle.js“
Svarbiausias žingsnis, leidžiantis šiam „Node“ stiliaus kodui veikti naršyklėje, yra leisti „Browserify“ procesui main.js ir visus reikiamus modulius, tada išleidžia vieną „JavaScript“ failą, paprastai vadinamą bundle.js. Tai galite padaryti iš komandinės eilutės, kai „Browserify“ bus įdiegta globaliai arba lokaliai jūsų projekte.
Įprasta komanda šiam procesui suaktyvinti gali atrodyti taip browserify main.js -o bundle.js. Čia browserify yra vykdomasis failas, kuris paleidžia sugrupavimo procesą, main.js yra įvesties failas, kurį „Browserify“ laiko priklausomybių grafiko šaknimi, ir -o bundle.js nurodo įrankiui įrašyti gautą paketą į failą pavadinimu bundle.js dabartiniame kataloge.
Užkulisiuose „Browserify“ analizuoja main.js, seka kiekvieną require iškviečiame jį „finds“ ir rekursyviai peržiūrime kiekvieną importuotą modulį. Tai apima jūsų vietinius failus, jei jums jų reikia su santykiniais keliais, taip pat trečiųjų šalių modulius, esančius po node_modules, toks kaip uniq paketą, kurį ką tik įdiegėte iš npm.
Kiekviena priklausomybė, su kuria susiduria „Browserify“, yra transformuojama, kad ji galėtų veikti naršyklėje, nereikalaujant gimtosios „Node“ aplinkos. Jis apvynioja kiekvieną modulį savo taikymo srityje, imituoja „CommonJS“ sąsają ir sujungia visus šiuos transformuotus modulius į vieną scenarijų. Gautas rezultatas bundle.js faile yra kodas, kuris imituoja require funkcija ir leidžia jūsų originalui var unique = require('uniq') eilutė tinkamai veiktų, kai vykdoma kliento pusėje.
Kai „Browserify“ baigs veikti, jums liks tik vienas „JavaScript“ failas, kuriame bus išsaugota jūsų originali programos logika ir visas tranzitinis priklausomybių medis, reikalingas, kad jis veiktų. Šis failas dabar paruoštas nuorodoms HTML puslapyje, kaip ir bet kuris kitas scenarijus, be jokios papildomos konfigūracijos naršyklės pusėje.
„Browserify“ paketo įkėlimas HTML puslapyje
Su bundle.js sugeneruota, viską integruoti į įprastą svetainę taip paprasta, kaip pridėti vieną scenarijaus žymą prie HTML. Užuot bandę įkrauti main.js tiesiogiai, jūs remiatės sukompiliuotu paketu, kurį sukūrė „Browserify“, kuriame jau yra uniq ir visus kitus npm modulius, kurių jums gali prireikti.
Paprastame HTML fragmente gali būti kažkas panašaus į <script src="bundle.js"></script> kažkur prieš uždarymą </body> žymė. Ši scenarijaus žymė nurodo naršyklei atsisiųsti ir vykdyti bundle.js failas. Kadangi paketas pats savaime emuliuoja „CommonJS“ aplinką, jūsų iškvietimai į require veikti viduje, net jei pasaulinė naršyklės aplinka vis dar nežino, kokia yra ta funkcija.
Puslapio požiūriu, nėra jokio matomo skirtumo tarp šio paketo ir bet kurio kito atskiro „JavaScript“ failo, kurį galėtumėte įtraukti. Modulių sudėtingumas, vidinės priklausomybės ir modeliuojamas require visa logika slypi viduje bundle.jsNaršyklei tereikia įkelti vieną išteklių ir jį paleisti, o tai taip pat turi našumo pranašumų, palyginti su daugelio atskirų mažų failų įkėlimu.
Dėl šios priežasties darbo eiga puikiai tinka net ir senesnėms sąsajų sistemoms, kuriose dirbate su statiniais HTML failais arba serverio pateiktais šablonais. Jums nereikia radikaliai keisti puslapių struktūros; tereikia pakeisti pateikiamo „JavaScript“ kodo paruošimo būdą, pakeičiant kelis išsklaidytus išteklius ir tik „Node“ skirtus modulius supaprastintu „Browserify“ sukurtu paketu.
Kodėl svarbu susieti su „Browserify“ naršant npm paketus
Kai žmonės kalba apie „npm paketų naršyklę“ arba apie npm paketų naršymą priekiniame plane, dažniausiai kyla klausimas: kaip aš galiu iš tikrųjų naudoti šį modulį naršyklės pagrindu sukurtame projekte? Tokių įrankių kaip „Browserify“ egzistavimas paverčia teorinį serverio bibliotekų katalogą praktiniu įrankių rinkiniu, kurį galite tiesiogiai pritaikyti savo žiniatinklio programose.
Praktiškai tai reiškia, kad npm tyrinėjimas ieškant naudingų modulių nebėra apribotas vien tik „Node“ ar serverio darbais. Jei rasite nedidelę įrankių biblioteką, kuri veikia vien tik su „JavaScript“ duomenų struktūromis ir nesiremia konkrečiam mazgui skirtomis API, yra didelė tikimybė, kad galėsite ją naudoti naršyklėje, susieję ją su „Browserify“ ar panašiu įrankiu. Tai labai išplečia jūsų galimybes sprendžiant tokias problemas kaip masyvų deduplikavimas, duomenų transformavimas ar mažų algoritmų įgyvendinimas.
Be to, sujungimas sumažina tinklo užklausų, kurias jūsų tinklalapis turi atlikti įkeldamas, skaičių. Užuot įtraukus atskiras scenarijų žymas kiekvienam vietiniam failui ar tolimai bibliotekai, viskas sujungiama į vieną bundle.js išteklius. Tai puikiai dera su HTTP talpykla ir gali supaprastinti diegimo procesus, ypač kai dirbate su sudėtingomis programomis, kurios priklauso nuo daugelio npm modulių.
Kalbant apie techninę priežiūrą, galimybė nuolat pasikliauti require o „npm“ priklausomybių valdymas padaro jūsų priekinės dalies kodo bazę labiau nuspėjamą ir modulinę. Modulius diegiate, atnaujinate ir šalinate naudodami npm komandas, centralizuotai tikrinate priklausomybes ir leidžiate „Browserify“ atlikti naršyklės suderinamumui reikalingą transformaciją, užuot rankiniu būdu kopijavus failus ar įterpus trečiųjų šalių kodą specialiais būdais.
Ryšys su šiuolaikiniais „JavaScript“ įrankiais
Nors klasikinis pavyzdys, kurį aptarėme, yra skirtas būtent „Browserify“, esminis modelis, kurį jis iliustruoja, vis dar yra daugelio šiuolaikinių priekinių sąsajų kūrimo įrankių pagrindas. Naujesni paketų kūrimo įrankiai, tokie kaip „Webpack“, „Rollup“, „Parcel“ ar „Vite“, taip pat sprendžia vienu stiliumi parašytų modulių konvertavimo į paketus, kuriuos naršyklės gali efektyviai vykdyti, problemą.
Šiuolaikinės naršyklės dabar palaiko ES modulius natūraliai per <script type="module">, kuris pakeičia dalį vaizdo, bet nepanaikina poreikio atlikti npm suvokiančius kūrimo veiksmus. Daugelyje „npm“ ekosistemos paketų vis dar naudojami „CommonJS“ įėjimo taškai arba jie naudojasi „Node“ stiliaus skiriamąja geba, ir net kai yra prieinamos ES modulių versijos, paketavimas išlieka vertingas optimizavimui, medžių kratymui ir nuosekliam įkėlimo elgesiui.
Šiame platesniame kontekste nedidelis pavyzdys, naudojant require('uniq'), npm install uniq ir browserify main.js -o bundle.js komanda yra daugiau nei trivialus vadovėlis. Tai demonstruoja pagrindinį procesą: „rašyti modulinį kodą, įdiegti priklausomybes iš npm, tada sukurti naršyklei patogų paketą“ – modelį, kurį šiandien naudoja beveik kiekviena rimta front-end sistema, net jei konkretūs įrankiai skiriasi.
Supratimas, kaip veikia „Browserify“, taip pat palengvina samprotavimus apie naujesnius rinkinius. Užuot laikę šiuolaikinius paketų tvarkytojus juodosiomis dėžėmis, galite pastebėti panašumą: jie visi skaito įvesties failus, seka importavimą arba reikalavimus, renka priklausomybes, transformuoja kodą ir išveda paketus, kuriuos naršyklė įkelia naudodama paprastas scenarijų žymas. „npm“ paketų ekosistema, modulių sistema ir paketų tvarkytuvas kartu sukuria patirtį, kuri atrodo sklandi kasdieniame kūrime.
Visko sujungimas į praktinį darbo eigą
Norėdami apibendrinti pradiniame pavyzdyje nurodytą praktinį darbo eigą, pirmiausia turite parašyti savo programos kodą į failą, pvz. main.js naudojant require importuoti bet kokius norimus naudoti npm modulius. Tame faile galite iškviesti var unique = require('uniq'), apibrėžkite masyvus, tokius kaip ir registruoja rezultatus konsolėje. Iš esmės, jūs dirbate taip, tarsi visa tai vyktų „Node“.
Kitas žingsnis – užtikrinti, kad tie moduliai iš tikrųjų egzistuoja jūsų projekte, įdiegiant juos naudojant npm, pavyzdžiui, per npm install uniq. Šis veiksmas užpildo node_modules kataloge, suteikdamas „Node“ ir „Browserify“ prieigą prie modulio kodo, kad jį būtų galima išspręsti ir įtraukti ten, kur reikia.
Kai jūsų kodas ir priklausomybės yra vietoje, nurodote „Browserify“ rekursyviai rinkti viską, pradedant nuo jūsų įvesties failo, paleisdami tokią komandą kaip browserify main.js -o bundle.js. Tas procesas eina per priklausomybių medį, apvynioja kiekvieną modulį, kad imituotų „CommonJS“ aplinką naršyklėje, ir galiausiai išrašo bundle.js kaip vieną sujungtą failą, kuriame yra visas reikalingas kodas.
Galiausiai pereinate prie HTML ir nurodote tik šį vieną išvesties failą naudodami įprastą scenarijaus žymę, pvz. <script src="bundle.js"></script>. Puslapyje nereikia jokios specialios sintaksės; visas sudėtingumas slypi pačiame pakete. Naršyklė atsisiunčia ir vykdo bundle.js, o kodas jame veikia taip, tarsi require mechanizmai buvo įmontuoti pačioje naršyklėje.
Laikydamiesi šio modelio, jūs efektyviai užpildote atotrūkį tarp „Node“ modulių sistemos ir naršyklės aplinkos, tuo pačiu toliau naudodamiesi didžiule „npm“ paketų ekosistema. Jūs naršote paketus, juos įdiegiate, nustatote jų poreikį ir tada išsiunčiate vieną optimizuotą failą savo vartotojams, taip užtikrindami, kad tiek kūrimo patirtis, tiek vykdymo aplinka būtų lengvai valdoma ir efektyvi.
Žvelgiant iš aukštesnio lygio perspektyvos, npm, „Node“ stiliaus modulių ir tokio paketo kaip „Browserify“ derinys paverčia išsklaidytą „JavaScript“ failų kolekciją nuosekliu, naršyklei paruoštu išteklių srautu. Kūrėjai gali rašyti modulinį kodą, pasikliauti bendruomenės prižiūrimais paketais ir vis tiek pateikti vieną scenarijų savo tinklalapiams, todėl šiuolaikinis „JavaScript“ kūrimas yra pritaikomas ir prieinamas įvairiuose įrankiuose ir aplinkose.
