- Iziphequluli azinawo ukusekelwa kwendabuko komsebenzi we-Node odingayo, ngakho-ke amamojula e-npm esitayela se-CommonJS awakwazi ukusebenza ngqo ku-JavaScript eseceleni kweklayenti.
- I-Browserify ihlaziya ifayela lokufaka njenge-main.js, ilandela konke okudinga izingcingo futhi ihlanganisa konke okuxhomeke kukho kufayela elilodwa le-JavaScript elilungele isiphequluli.
- Ukufaka amamojula anemiyalo efana ne-npm install uniq kuvumela i-Browserify ukuthi idonse amaphakheji kusuka ku-node_modules bese iwafaka ku-bundle.js ekhiqizwe.
- Ukufaka ama-bundle.js ngethegi yesikripthi esijwayelekile ku-HTML kwenza ikhodi ye-modular esekelwe ku-npm isebenze kahle kusiphequluli njengefa elilodwa elilungiselelwe.
Uma uqala ukusebenza ngamamojula eJavaScript, enye yezingxabano zokuqala ozithintayo igebe phakathi kwendlela i-Node.js elayisha ngayo ikhodi kanye nendlela iziphequluli ezikwenza ngayo. Ku-Node umane ushayele ucingo require() futhi konke kuhlangana ngomlingo. Kodwa zama into efanayo ngqo kusiphequluli futhi uzothola ngokushesha ukuthi lo msebenzi awukho lapho. Yilapho kanye amathuluzi, imisebenzi yokusebenza kanye nemibono ezungeze isiphequluli sephakheji se-npm kanye nama-bundler afana ne-Browserify angena khona ukuze asindise usuku.
Lesi sihloko sikubonisa indlela i-npm njenge-package ecosystem ehlangana ngayo nomqondo wokuphequlula, ukuthola nokugcina uhlanganisa lawo maphakheji ukuze asebenze ngempela kusiphequluli sewebhu. Sizophinda sibuke isibonelo esidala esisekelwe ku-Browserify, sichaze ukuthi kungani require Isebenza ku-Node kodwa hhayi kusiphequluli, futhi ibonise isinyathelo ngesinyathelo ukuthi ungasuka kanjani kufayela elincane lesikripthi uye empahleni eyodwa ehlanganisiwe ongayifaka ekhasini lewebhu elinethegi yesikripthi elula. Endleleni, sizophinde sinikeze umongo, amathiphu asebenzayo kanye nezinye izindlela zesimanje ukuze wonke umsebenzi wokusebenza ube nomqondo kumaphrojekthi angempela.
Ukuqonda igebe phakathi kwe-Node.js nesiphequluli
Iphuzu elibalulekile lokuqala ukuthi iziphequluli zewebhu kanye nama-Node.js anikeza izinhlelo zamamojula ezihlukile kakhulu. I-Node ngokomlando isebenzise ifomethi yemojula ye-CommonJS, lapho ulayisha khona ukuncika usebenzisa require('package-name') futhi uveze ukusebenza nge module.exportsLeyo phethini ihlanganiswe ngokujulile nesikhathi sokusebenza se-Node, kodwa iziphequluli zendabuko azazi lutho ngayo.
Endaweni yesiphequluli esilula akukho okwakhelwe ngaphakathi require umsebenzi, futhi akukho ukusekelwa kwamamojula esitayela se-CommonJS ancike kuwo amaphakheji amaningi e-npm. Isiphequluli siyaqonda amathegi esikripthi sakudala alayisha amafayela eJavaScript emhlabeni jikelele, futhi ezindaweni zesimanje sisekela amamojula e-ES nge type="module" imfanelo, kodwa ayikaqondi ama-semantics e-Node's CommonJS ngokwayo.
Lo mehluko uba yinkinga ngokushesha nje lapho uzama ukusebenzisa kabusha ikhodi yesitayela se-Node noma amaphakheji e-npm ngqo ngaphakathi kweJavaScript eseceleni kweklayenti. Ungase ube nesiqephu esilula esifana nokuthi var unique = require('uniq') lokho kusebenza kahle kuskripthi se-Node, kodwa uma unamathisela umugqa ofanayo kufayela elilayishwe kusiphequluli uzothola iphutha lereferensi ngokushesha, ngoba require akuchaziwe.
Ngakho-ke abathuthukisi badinga uhlobo oluthile “lwebhuloho” olubavumela ukuthi baqhubeke nokubhala ikhodi ejwayelekile efana ne-Node ngenkathi besathumela izimpahla ezihambisana nesiphequluli. Lelo bhuloho ngokuvamile liyi-bundler: ithuluzi elihamba ngegrafu yakho yokuxhomekeka kusukela kufayela lokungena, liqoqe konke okudingekayo, futhi likhiphe i-JavaScript bundle eyodwa isiphequluli esingayisebenzisa ngaphandle kokwazi lutho nge-Node noma i-npm.
Lokho okwenziwa yi-Browserify ku-npm ecosystem
I-Browserify ingenye yamathuluzi okuqala futhi anethonya axazulule le nselele ngqo kubathuthukisi beJavaScript. Umgomo wayo ulula: ake ubhale ikhodi ngeNode's require iphethini, donsa amamojula kusukela ku-npm, bese upakisha konke lokho kufayela elilodwa elisebenza kusiphequluli njengokungathi i-CommonJS isekelwa ngokomdabu.
Kusukela embonweni wokuphequlula iphakheji ye-npm, i-Browserify iguqula ngempumelelo uhlelo lwe-ecosystem olukhulu lwephakheji ye-Node lube umtapo wolwazi oluxhomeke kumakhasimende. Esikhundleni sokukopisha imibhalo ngesandla, umane ufake imodyuli evela ku-npm, sebenzisa require() njengakwikhodi eseceleni kweseva, futhi uthembele ku-Browserify ukuthi ihumushe lokho kube yinto iziphequluli zabasebenzisi bakho ezingayiqonda.
Ngaphakathi, i-Browserify idlula kuzo zonke amamojula abhekiselwe kuwo require, kusukela kufayela lokufaka elinikeziwe, bese kwakha igrafu yokuxhomekeka. Kwimojula ngayinye kuleyo grafu, ibhala kabusha ikhodi ibe yifomu elilingisa imvelo ye-CommonJS kusiphequluli, kufaka phakathi i-local scoping kanye ne-browser-friendly. require ukusetshenziswa. I-artifact yokugcina ifayela elilodwa lenqwaba, elivame ukubizwa ngokuthi bundle.js, ehlanganisa wonke lawa mamojula.
Umphumela wokugcina uwukuhamba komsebenzi lapho abathuthukisi be-front-end bengathembela kumaphakheji avela ku-npm ngaphandle kokukhathazeka ngokuntuleka kwesiphequluli sokusekela kwasendaweni kwamamojula e-Node. Uthola ukufinyelela kukhathalogi enkulu yemitapo yolwazi yemisebenzi efana nokuphathwa kwedatha, izinsiza noma abasizi be-UI, kodwa usaphakela iklayenti ifayela elilodwa lesikripthi, elihlanganiswa kahle namakhasi e-HTML avamile.
Ukubhala kabusha isibonelo sesifundo se-Browserify sakudala
Ukuze wenze konke kube ngokoqobo, ake sithi unefayela elilodwa leJavaScript eliqanjwe main.js kuphrojekthi yakho futhi ufuna ukusebenzisa iphakheji ye-npm ebizwa ngokuthi uniq ukuhlunga amanani aphindaphindwayo kusuka ku-array. Endaweni ye-Node, ungaqala ifayela ngomugqa ofana no- var unique = require('uniq')Lo mugqa ungenisa umsebenzi othunyelwe kusuka ku- uniq imodyuli bese iyigcina ku-variable ebizwa ngokuthi unique.
Ngaphakathi kwalokhu main.js ifayela, ungase udale uhlu olulula lwezinombolo oluqukethe okufakiwe okuphindaphindiwe. Isibonelo, ungasetha var data = , lapho izinombolo ezithile zivela khona izikhathi ezingaphezu kwesisodwa. Umgomo uwukukhiqiza uhlu olusha oluhlanganisa inombolo ngayinye ngesikhathi esisodwa kuphela, ngokulandelana okuhleliwe.
Ukusebenzisa umsebenzi ongenisiwe, yonke eminye ikhodi iba lula kakhulu. Ungacela console.log(unique(data)) ukuphrinta kukhonsoli uhlu olubuyiswe yi- uniq iphakheji, esusa amanani aphindaphindiwe ohlwini. Uma usebenzisa lokhu ku-Node, uzobona uhlu lokukhipha lapho inombolo ngayinye ivela kanye kuphela.
Konke lokhu kucabanga kucabanga ukuthi uniq imodyuli iyatholakala endaweni okuyo, nokuthi require umsebenzi uchazwe futhi uyakwazi ukuwuxazulula. Ku-Node, lokho kuphathwa yisikhathi sokusebenza kanye I-algorithm yokuxazulula imodyuli ye-node, efuna isiqondisi esibizwa ngokuthi node_modules bese kuba ifolda eqanjwe ngokuthi uniq ngaphakathi kuyo.
Ukufaka iphakheji ye-uniq kusukela ku-npm
Ngaphambi kokuthi ikhodi yakho ishaye require('uniq'), udinga ukufaka iphakheji kusuka kurejista ye-npm. Lokhu kwenziwa kusukela kumugqa womyalo kusetshenziswa iklayenti le-npm eliza lihlanganiswe ne-Node.js. Uma umi kufolda yakho yephrojekthi, ungasebenzisa umyalo ofana npm install uniq ukuze i-npm ilande imodyuli bese iyigcina ngaphansi kwe- node_modules isiqondisi.
The npm install uniq umyalelo ulanda inguqulo eshicilelwe ye- uniq iphakheji bese uyingeza ekuncikeni kwephrojekthi yakho yasendaweni. Kuye ngokucushwa kwakho kwe-npm nokuthi usebenzisa i- package.json ifayela, lingaqopha futhi iphakheji ohlwini lwakho lokuthembela, liqinisekise ukufakwa okuqhubekayo kuzo zonke izindawo zabanye onjiniyela eqenjini lakho.
Uma iphakheji selifakiwe, isakhiwo sesikhombisi sephrojekthi yakho sihlanganisa okusha node_modules/uniq ifolda equkethe ikhodi yaleyo phakheji. Yilokho kanye okuvumela i-Node's require uhlelo lokuthola imodyuli uma isixazululekile 'uniq'. Ifolda efanayo yilokho iBrowserify ezokuhlola uma iqala ukwakha igrafu yokuxhomekeka kwephakheji yakho.
Kuleli phuzu, yakho main.js ifayela lisebenza kahle kakhulu ikhodi ye-Node engasetshenziswa kuseva noma kusuka ku-terminal kusetshenziswa umhumushi we-Node ojwayelekile. Kodwa-ke, uma nje ushiya lokhu main.js Uma ufaka ikhasi lewebhu usebenzisa ithegi yesikripthi, isiphequluli sakho ngeke siqonde ukuthi ukungenisa kwesitayela se-CommonJS kufakiwe, ngakho-ke udinga isinyathelo esengeziwe ukuze silungele isiphequluli.
Ukuhlanganisa ama-main.js kanye nokuxhomekeka kwawo ku-bundle.js
Isinyathelo esibalulekile esenza le khodi yesitayela se-Node isebenze kusiphequluli ukuvumela i-Browserify ukuthi iqhubeke main.js kanye nawo wonke amamojula adingekayo, bese kukhishwa ifayela elilodwa leJavaScript elivame ukubizwa ngokuthi bundle.js. Ungakwenza lokhu kusuka kulayini womyalo uma i-Browserify isifakiwe emhlabeni wonke noma endaweni yakho kuphrojekthi yakho.
Umyalo ojwayelekile wokuqalisa le nqubo ungase ubonakale kanje browserify main.js -o bundle.js. Lapha, browserify yi-executable eqala inqubo yokuhlanganisa, main.js ifayela lokungena i-Browserify eliliphatha njengempande yegrafu yokuxhomekeka, futhi -o bundle.js iyala ithuluzi ukuthi libhale inqwaba ephumayo kufayela eliqanjwe ngegama bundle.js kufolda yamanje.
Ukuhlaziya okungemuva kwezigcawu, i-Browserify main.js, ilandela yonke require shayela i-finds, bese ihlola ngokuphindaphindiwe imodyuli ngayinye engenisiwe. Lokho kufaka phakathi amafayela akho endawo uma uwadinga ngezindlela ezihlobene, kanye namamojula ezinkampani zangaphandle ahlala ngaphansi node_modules, sesha njenge uniq iphakheji osanda kuyifaka kusukela ku-npm.
Konke ukuthembela okuhlangatshezwa yi-Browserify kuyaguqulwa ukuze kusebenze ngaphakathi kwesiphequluli ngaphandle kokudinga indawo ye-Node. Isonga imojula ngayinye ngobubanzi bayo, ilingise isikhombimsebenzisi se-CommonJS, bese ihlanganisa wonke lawa mamojula aguquliwe abe iskripthi esisodwa. bundle.js ifayela liqukethe ikhodi elilingisa i- require isebenza futhi ivumela okwakho kwasekuqaleni var unique = require('uniq') umugqa ukuze uziphathe kahle uma usetshenziswa ohlangothini lweklayenti.
Uma i-Browserify isiqedile, usala nefayela elilodwa le-JavaScript elithwebula i-logic yohlelo lwakho lokusebenza lokuqala kanye nesihlahla sonke sokuthembela esiguqukayo esidingekayo ukuze sisebenze. Leli fayela selikulungele ukubhekisela ekhasini le-HTML njenganoma yisiphi esinye iskripthi, ngaphandle kokucushwa okwengeziwe ohlangothini lwesiphequluli.
Ilayisha inqwaba ye-Browserify ekhasini le-HTML
With bundle.js Uma kukhiqizwa, ukuhlanganisa konke kuwebhusayithi evamile kulula njengokufaka ithegi eyodwa yesikripthi ku-HTML yakho. Esikhundleni sokuzama ukulayisha main.js ngqo, ubhekisela kuphakheji ehlanganisiwe eyenziwe yi-Browserify, esevele ifaka phakathi uniq kanye nanoma yimaphi amanye amamojula e-npm okungenzeka ukuthi uwadinga.
Isiqephu se-HTML esiyisisekelo singase siqukathe into efana nale <script src="bundle.js"></script> endaweni ethile ngaphambi kokuvala </body> umaki. Le thegi yesikripthi itshela isiphequluli ukuthi silande futhi sisebenzise bundle.js ifayela. Ngenxa yokuthi inqwaba ilingisa imvelo ye-CommonJS ngaphakathi kwayo, ubiza ku- require sebenza ngaphakathi noma ngabe indawo yesiphequluli somhlaba wonke ayikakwazi ukuthi lowo msebenzi uyini.
Ngokombono wekhasi, akukho mehluko obonakalayo phakathi kwaleli qoqo kanye nanoma yiliphi elinye ifayela le-JavaScript ongalifaka. Ubunzima bamamojula, ukuncika kwangaphakathi, kanye nokulingisa require i-logic yonke ihlanganiswe ngaphakathi bundle.jsIsiphequluli sidinga ukulayisha umthombo owodwa kuphela bese siwusebenzisa, futhi onezinzuzo zokusebenza uma kuqhathaniswa nokulayisha amafayela amaningi amancane ahlukene.
Ngenxa yalokhu, ukuhamba komsebenzi kuhambisana kahle ngisho nasezindaweni ezindala ezingaphambili lapho ungase usebenze khona ngamafayela e-HTML angaguquki noma amathempulethi anikezwe yiseva. Akudingeki ushintshe kakhulu indlela ohlela ngayo amakhasi akho; umane ushintshe indlela olungiselela ngayo i-JavaScript oyinikezayo, ushintsha izinsiza eziningi ezihlakazekile kanye namamojula e-Node kuphela ngephakheji elungiselelwe kahle ekhiqizwe yi-Browserify.
Kungani ukuhlanganisa i-Browserify kubalulekile ekuphequluleni iphakheji ye-npm
Uma abantu bekhuluma “ngesiphequluli sephakheji se-npm” noma bephequlula amaphakheji e-npm okusetshenziswa ngaphambili, umbuzo oyisisekelo uvame ukuba: ngingayisebenzisa kanjani le module kuphrojekthi esekelwe kusiphequluli? Ukuba khona kwamathuluzi afana ne-Browserify kuguqula ikhathalogi yethiyori yamalayibrari aseceleni kweseva ibe ibhokisi lamathuluzi eliwusizo ongalisebenzisa ngqo kuzinhlelo zakho zokusebenza zewebhu.
Empeleni, lokhu kusho ukuthi ukuhlola i-npm ngamamojula awusizo akusakhawulelwe emsebenzini we-Node noma we-back-end. Uma uthola umtapo wolwazi omncane osebenza kuphela ezakhiweni zedatha yeJavaScript futhi onganciki kuma-API athile e-Node, kunethuba elikhulu lokuthi ungayisebenzisa kusiphequluli ngokuyihlanganisa ne-Browserify noma ithuluzi elifanayo. Lokho kwandisa kakhulu izinketho zakho lapho uxazulula izinkinga ezifana nokunciphisa ama-array, ukuguqula idatha noma ukusebenzisa ama-algorithms amancane.
Ngaphezu kwalokho, ukuhlanganisa ama-bundling kunciphisa inani lezicelo zenethiwekhi okufanele ikhasi lakho lewebhu lizenze lapho lilayisha. Esikhundleni sokufaka amathegi esikripthi ahlukene efayela ngalinye lendawo noma umtapo wolwazi olukude, konke kuhlanganiswa kube yi-single bundle.js ifa. Lokhu kudlala kahle nge-HTTP caching futhi kungenza kube lula amapayipi okuhambisa, ikakhulukazi uma ubhekene nezinhlelo zokusebenza eziyinkimbinkimbi ezithembele kumamojula amaningi e-npm.
Kusukela ekhoneni lokulungisa, ukukwazi ukuthembela njalo ku require futhi ekuphathweni kokuxhomekeka kwe-npm kwenza i-codebase yakho yangaphambili izwakale ibikezeleka futhi i-modular. Ufaka, ubuyekeze futhi ususe amamojula usebenzisa imiyalo ye-npm, uhlole ukuncika phakathi, bese uvumela i-Browserify ukuthi iphathe ukuguqulwa okudingekayo ukuze ihambisane nesiphequluli, esikhundleni sokukopisha amafayela ngesandla noma ukufaka ikhodi yomuntu wesithathu ngezindlela ze-ad-hoc.
Ubudlelwano namathuluzi esimanje eJavaScript
Nakuba isibonelo esidala esidlule kuso sigxile kakhulu ku-Browserify, iphethini eyisisekelo esibonisayo isasekela amathuluzi amaningi okwakha angaphambili esimanje. Ama-bundler amasha afana ne-Webpack, i-Rollup, i-Parcel noma i-Vite nawo abhekana nenkinga yokuguqula amamojula abhalwe ngesitayela esisodwa abe ama-bundle iziphequluli ezingawasebenzisa kahle.
Iziphequluli zesimanje manje zisekela amamojula e-ES ngendlela yemvelo ngokusebenzisa <script type="module">, okushintsha ingxenye yesithombe kodwa okungasusi isidingo sezinyathelo zokwakha ze-npm-aware. Amaphakheji amaningi ku-npm ecosystem asaveza amaphuzu okungena e-CommonJS noma athembele ekuxazululweni kwesitayela se-Node, futhi noma ngabe ukwakhiwa kwe-module ye-ES kuyatholakala, ukuhlanganisa kuhlala kubalulekile ekwenzeni ngcono, ukunyakazisa izihlahla kanye nokuziphatha kokulayisha okuqhubekayo.
Kulesi simo esibanzi, isibonelo esincane esisebenzisa require('uniq'), npm install uniq futhi browserify main.js -o bundle.js umyalo ungaphezu nje kwesifundo esingasho lutho. Ibonisa indlela eyinhloko “yokubhala ikhodi ye-modular, ukufaka ukuncika kusukela ku-npm, bese ukhiqiza iphakheji enobungani nesiphequluli,” iphethini ehlanganyelwe cishe yizo zonke izisetho eziyinhloko zanamuhla, noma ngabe amathuluzi athile ahlukile.
Ngakho-ke ukuqonda ukuthi i-Browserify isebenza kanjani kwenza kube lula ukucabanga ngama-stack amasha. Esikhundleni sokuphatha ama-bundler anamuhla njengamabhokisi amnyama, ungabona ukufana: wonke afunda amafayela okungena, alandela ukungenisa noma okudingayo, aqoqa ukuncika, aguqula ikhodi kanye nama-output bundles alayishwa yisiphequluli ngamathegi esikripthi alula. I-npm package ecosystem, uhlelo lwe-module kanye ne-bundler ndawonye kudala ulwazi oluzwakala lungenamthungo ekuthuthukisweni kwansuku zonke.
Ukuhlanganisa konke ndawonye emsebenzini osebenzayo
Ukuze ubuyekeze ukuhamba komsebenzi okusebenzayo okushiwo yisibonelo sokuqala, uqala ngokubhala ikhodi yakho yohlelo lokusebenza kufayela elifana nelithi main.js usebenzisa require ukungenisa noma yimaphi amamojula e-npm ofuna ukuwasebenzisa. Kulelo fayela ungashayela ucingo var unique = require('uniq'), chaza uhlu olufana , bese ufaka imiphumela kukhonsoli. Ngomqondo, usebenza sengathi konke lokhu kuzosebenza ngaphansi kwe-Node.
Isinyathelo esilandelayo ukuqinisekisa ukuthi lawo mamojula akhona ngempela kuphrojekthi yakho ngokuwafaka nge-npm, isibonelo ngokusebenzisa npm install uniq. Lesi senzo sigcwalisa i- node_modules isiqondisi, okunikeza kokubili i-Node kanye ne-Browserify ukufinyelela ikhodi yemojuli ukuze ixazululwe futhi ifakwe lapho kudingeka khona.
Ngemva kokuthi ikhodi yakho kanye nokuncika kwakho sekukhona, uyala i-Browserify ukuthi iqoqe konke ngokuphindaphindiwe kusukela kufayela lakho lokungena ngokusebenzisa umyalo ofana browserify main.js -o bundle.js. Leyo nqubo ihamba esihlahleni sokuthembela, isonga imodyuli ngayinye ukuze ilingise indawo ye-CommonJS kusiphequluli, bese ekugcineni ibhala phansi bundle.js njengefayela elilodwa elihlanganisiwe eliqukethe yonke ikhodi edingekayo.
Ekugcineni, ushintshela ku-HTML yakho bese ubhekisela kuphela kuleli fayela elilodwa lokukhipha elinethegi yesikripthi evamile njenge <script src="bundle.js"></script>. Akukho sakhiwo esikhethekile esidingekayo ekhasini; ubunzima buhlala ngaphakathi kwenqwaba. Isiphequluli siyalanda futhi sisebenzise bundle.js, futhi ikhodi engaphakathi kwayo isebenza sengathi require imishini yakhelwe kusiphequluli uqobo.
Ngokulandela le ndlela, uvala ngempumelelo igebe phakathi kohlelo lwe-module lwe-Node kanye nendawo yesiphequluli ngenkathi uqhubeka nokuzuza ohlelweni olukhulu lwe-npm package. Uphequlula amaphakheji, uwafake, uwadinge bese uthumela ifayela elilodwa elilungiselelwe kubasebenzisi bakho, ugcine kokubili ulwazi lokuthuthukiswa kanye nendawo yokusebenza kulawuleka futhi kusebenza kahle.
Uma kubhekwa ngombono osezingeni eliphezulu, inhlanganisela yamamojula esitayela se-npm, i-Node kanye ne-bundler efana ne-Browserify iguqula iqoqo elihlakazekile lamafayela e-JavaScript libe yipayipi lempahla elihambisanayo, elilungele isiphequluli. Abathuthukisi bangabhala ikhodi ye-modular, bathembele kumaphakheji anakekelwa umphakathi futhi basalethe iskripthi esisodwa emakhasini abo ewebhu, okwenza ukuthuthukiswa kwe-JavaScript yesimanje kube lula futhi kufinyeleleke kuwo wonke amathuluzi nezindawo.
