Ukusebenza kwiprojekthi entsonkothileyo, nokuba ungumdwebi wenkqubo onamava okanye ungumntu omtsha, ngokuqinisekileyo uya kuhlangabezana neengxaki. Xa usahlulahlula iprojekthi yakho kwiimodyuli ezininzi, kuvela imiba, isenza kube nzima ukulandelela iimpazamo kunye nokufumana izisombululo. Kwezinye iimeko, ukulungisa ingxaki kwimeko nganye kunokuba nzima kuba awusifumananga isisombululo esifanelekileyo kwingxaki obusebenza kuyo.
Iyenzeka kwakhona njengeqhekeza lekhowudi ngamanye amaxesha, enokuthi ibonakale inzima ngelo xesha. IJavaScript yenye yeelwimi ezisekwe kwiWebhu ekulula kakhulu ukuzifunda. Qalisa ngokulula isikhangeli sakho sedesktop kwaye ujonge kwiZixhobo zoPhuhliso (ngokuqhelekileyo F12), kwaye ugqibile! Usenokulinga nge-JS ngaphandle kokufuna ukufaka okanye ukuqhuba nayiphi na isoftware entsonkothileyo.
Ukuze uqalise, konke okufunayo sisikhangeli. Kuyamangalisa ukuba nakho konke oku kulula ngaphandle kwebhokisi, kodwa kukho amaxesha apho ufuna ngakumbi. Umzekelo, cinga ukuba ufuna ukuzama i-API entsha yeWebhu osandul' ukuyifumana kodwa awufuni ukuqala iprojekthi entsha.
Kule post, siza kuthelekisa kwaye sithelekise iindawo zokudlala ezintathu ezidumileyo ze-JS, iCodePen, iCodeSandbox, kunye neStackBlitz. Masiqalise!
KhowudiPen
Izixhobo zophuhliso lwewebhu ezingaphambili zihlala zivela, kwaye abahleli bokubhaliweyo bayinxalenye enkulu yetekhnoloji yamva nje eyenza ubomi bomphuhlisi bube lula. Ngaphandle kwabahleli besicatshulwa abazimeleyo abanje ngeAtom okanye iNotepad ++, kuye kwakho uqhushumbo lwabahleli abasekwe kwisikhangeli kwiminyaka yakutshanje engadingi kufakelo lwenkqubo kunye nokukhuthaza intsebenziswano enkulu.
I-CodePen "luluntu olukwi-intanethi lokuvavanya kunye nokubonisa i-HTML, i-CSS, kunye nekhowudi ye-JavaScript eyenziwe ngabasebenzisi" enika amathuba amahle okufunda ukubhala amaphepha ewebhu angaphambili ngcono.
I-CodePen ikunika "iindlela" ezimbini. Eyokuqala kwaye isetyenziswa ngokuqhelekileyo yiPeni. Kulula njengokucofa iqhosha kwaye uhanjiswe ngqo kumhleli. Ukusuka apho, unokufikelela kwipaneli yokujonga kwangaphambili kunye nesiseko seHTML, CSS, kunye neJS yokuhlela windows.
Akukho “sixokelelwano sefayile,” “IntelliSense,” okanye nantoni na eyenye-ukuqaqambisa nje isivakalisi esilula kunye nemiyalelo ekhawulezayo njenge prettify. Kuluhlu lweenketho, unokukhetha kuluhlu oluthintelweyo lwabaqhubekekisi bazo zontathu iilwimi (ezifana ne-TypeScript ye-JS) okanye ukongeza imidibaniso kwimithombo yangaphandle.
Ukuba ufuna kuphela nantoni na eyenziwa simahla, omnye wabahleli uya kwanela. Ndingacebisa iCodePen ngayo nayiphi na into engafuni kusetwa okuninzi okanye amathala eencwadi - ngokulula iHTML, CSS, kunye neJS enokhetho lwangaphambili lokuqhubekekisa phezulu. Ukuba ufuna ukusebenzisa ibala lokudlala ukuphucula ubukho bakho kwimidiya yoluntu okanye ukuphuhlisa ipotfoliyo yakho, iCodePen lolona khetho lungcono.
INguqulelo yePremiyamu
Unezinye iindlela ezimbalwa ongakhetha kuzo kwiCodePen. Ukuba uhlawula ngonyaka, unokufumana enye yezicwangciso ezintathu zeprimiyamu yeedola ezili-12, i-$19, okanye i-$39 ngenyanga nganye. Unokwenza inani elingenasiphelo leepeni zabucala, izithuba, kunye nengqokelela kuyo nayiphi na imigangatho emithathu.
Uyakufumana kwakhona ibheji yePro (unyuso loluntu), ufikelelo lwendlela yokudibana, akukho ntengiso, nokunye. Kukwakho nezicwangciso ezithile ezithe ngqo zeqela kunye nolunye ulwahlulo lwamanqanaba. Jonga ibhodi yabo yokuhlawula esemthethweni ngolwazi oluthe vetshe.
Ezona mpawu
Ngaphandle kokudala i-HTML, i-CSS, kunye neJavaScript kwi-CodePen, kukho ezinye izinto ezimbalwa eziyibekayo.
- Ukujongwa kwexesha lokwenyani lekhowudi yakho kunokwenzeka. Ayifuni kuhlanganiswa.
- Uvavanyo lukuvumela ukuba ufunde izinto ezintsha.
- Yenza iimeko zovavanyo ezincinci ukujonga kwaye ulungise iingxaki.
- Khangela imisebenzi yakho ebalulekileyo.
- Yenza kwaye ugcine iiPeni ukuze zisetyenziswe kamva.
- Zama ikhowudi yabanye abaphuhlisi kwaye uyibone isebenza.
eziluncedo
- Ukuqala, akukho ndleko.
- Izixhobo zokufunda ezakhelwe ngaphakathi.
- Sebenzisana nabanye kwaye uthelekise iiprojekthi ukuze ubone apho banokuya khona kwixesha elizayo.
- I-UI ilula ukuyisebenzisa kwaye ithe ngqo.
nezingeloncedo
- Ilayibrari yekhowudi incinci, ukugqitywa kwekhowudi ye-auto akwanelanga. Ilungile kwiiprojekthi zephepha elinye kwaye ayikwazi ukuphatha nantoni na enkulu.
- KwiCodePen, unokwenza iipeni zabucala, kodwa kuya kufuneka uphucule kubulungu bePro ($9/ngenyanga).
IkhowudiSandbox
I-CodeSandbox ngumhleli wekhowudi esekwe kwiwebhu. Izenza ngokuzenzekelayo ukutshintshela, ukupakisha, kunye nolawulo lokuxhomekeka kuwe, ikuvumela ukuba wakhe iprojekthi entsha ngokucofa kanye. Emva kokuba wenze into enomdla, ungabelana ngayo nabanye ngokwabelana nje ngewebhusayithi.
Umhleli uyahambelana nazo naziphi na iiprojekthi zeJavaScript, nangona ibandakanya iimpawu ezithile ze-React, ezifana nokukhetha ukugcina iprojekthi kwi-template ye-creative-react-app.
Nayiphi na iprojekthi oyakhayo kwiCodeSandbox iqala ngetemplate. Isenokunxulumana nethala leencwadi elithile, isakhelo, okanye ixesha lokusebenza (kuquka iNode.js) okanye isebenzise ngokulula ubugcisa bewebhu obuqhelekileyo. Emva kokukhetha itemplate, uthunyelwa kumhleli, apho uya kufumana zonke iifayile eziyimfuneko kunye nefestile yokujonga kwangaphambili esele ivuliwe.
Unokufikelela "kwinkqubo yefayile" kuzo zonke iibhokisi zeSand, okuthetha ukuba unokwenza iifayile ezintsha, usebenzise iimodyuli (kubandakanya iipakethe zeNPM), kwaye usebenzisane ne-static asset. Kukwakho ithuba lokuguqula iifayile zoqwalaselo ezithe ngqo.
Ungazakhela ezakho iitemplates zemeko yakho yosetyenziso ekhethekileyo, epheleleyo ngesakhiwo sefayile kunye nokuxhomekeka, kufana ne-IDE. Kuba isixhobo siqhagamshelwe kwi-Github, unokuvelisa ngokukhawuleza ukuzibophelela kwaye uvule iiPRs. Ungathumela isicelo sakho kwi-ZEIT okanye kwi-Netlify ngoko nangoko.
Iqela leCodeSandbox Pro
I-CodeSandbox, ishishini laseDatshi elivumela abaphuhlisi ukuba bakhe i-sandbox yophuhliso lwewebhu esekwe kwisikhangeli, ikhuphe ngokusemthethweni iqonga lentsebenziswano elivumela amaqela ukuba asebenze kwikhowudi efini. Imveliso entsha, iQela lePro, isisombululo esingenayo ikhowudi esakhelwe amaqela emveliso epheleleyo, ukusuka kubaqulunqi kunye nabaphathi ngokusebenzisa amaqela okuqinisekisa umgangatho (QA) nangaphezulu.
Iiprojekthi zibonelelwa ngojongano olusebenziseka lula kuye nabani na onqwenela ukwenza okanye ukwamkela utshintsho kwisicelo sewebhu, enqanda ezinye iindlela ezinjengokuthumela amanqaku kunye neengcebiso kubaphuhlisi ukuba benze utshintsho, bazidlulisele kwingxoxo, kunye nokuphinda inkqubo.
Ezona mpawu
- Umhleli wekhowudi esekwe kwiwebhu kunye nesixhobo somzekelo.
- Ukusetyenziswa kwasekhaya, ibhokisi yesanti inokukhutshelwa ngokulula kwifayile ye-zip.
- soLungiselelo kwenziwa kwiibhokisi zesanti, ezinokuthi kwabelwane ngazo nabantu osebenza nabo.
eziluncedo
- Amava omsebenzisi aphuculweyo kunye nolawulo olukhulu kumhleli.
- Imboniso ephilayo inokuguqulwa kwaye ijongwe kwifestile eyahlukileyo.
- Ikhowudi ifomathiwe ngokuzenzekelayo kwaye ibandakanya i-CLI (codesandbox-cli)
- Inkxaso yeemodyuli eziphambili ze-npm.
- Imiyalezo yempazamo emnandi enengcebiso.
- Iphucula amava okulungisa ingxaki ngokubonelela nge-terminal engcono, umboniso wovavanyo, kunye nokukhupha umbukeli.
nezingeloncedo
- Umthengi wokugqibela uboniswa kwizinto ezininzi zobuntu.
- Ukutsala kunye nokulahla iifayile kwikhompyuter yendawo ayisebenzi kakuhle.
- Ulwakhiwo oluthile lwesiqulathi seefayili kufuneka lulandelwe kwiCodeSandbox.
- Ukusebenza kwebhokisi yesanti yabucala kufumaneka kuphela kubaxhasi.
I-StackBlitz
I-StackBlitz yiKhowudi yeSitudiyo esiBonakalayo ene-IDE ekwi-intanethi yosetyenziso lwewebhu. Iqonga liphendula kwaye liguquguquka njengenguqulelo yedesktop. I-StackBlitz yi-IDE ekwi-intanethi esiza ilayishwe kwangaphambili I-Angular kunye ne-React izixhobo zophuhliso.
I-Thinkster.io yakha loo projekthi imangalisayo ukwenza kube lula kangangoko ukuba uqalise ngeprojekthi yakho ye-Angular okanye ye-React ngaphandle kokuba nexhala malunga nofakelo lokuxhomekeka okanye useto lokwakha. I-StackBlitz ibonelela ngezinto ezininzi ezimangalisayo kunye nezohlukileyo ekungekho mnye umhleli wekhowudi ye-intanethi anayo ngoku. Ngenxa yoko, kufanelekile ukuphanda i-StackBlitz ngakumbi kwaye ufumanise ukuba le IDE ikwi-intanethi inokubonelela ngantoni.
I-Stackblitz ithelekiseka kakhulu ne-IDE epheleleyo, ngakumbi ukuba awukwazi ukuthi ndlela-ntle kwikhowudi ye-VS kuba isixhobo sisekwe kuyo. Iphakheji ineempawu ezahlukeneyo ezikuvumela ukuba uqalise kwaye uqhubeke nokwenza usetyenziso olugcweleyo.
Inkqubo inikwe amandla yiVisual Studio, eyaziwayo phakathi kwabaphuhlisi. Ukuhlela ngaphandle kweintanethi luphawu olubalaseleyo lweprojekthi. Ukwenza oku kwenzeke, iqela le-Stackblitz lenze iseva yewebhu engaphakathi kwibrowser. Njengoko uchwetheza, ifaka ngokuzenzekelayo ukuxhomekeka, iqulunqa, imithwalo, kwaye yenza ukulayishwa kwakhona okushushu.
INguqulelo yePremiyamu
I-Cadet, i-Astronaut, kunye ne-Commander ziyafumaneka mahala, i-$ 8 / ngenyanga, kunye ne-$ 29 / ngenyanga, ngokulandelanayo. I-Astronaut kunye ne-Commander ibandakanya inani leempawu ezifana neeprojekthi zabucala ezingenamkhawulo, ukufakwa kwefayile okungenamkhawulo, ukumema kwiqela eliphambili letshaneli yokudodobala, njalo njalo. Ngolwazi oluthe vetshe, jonga ibhodi yamatyala esemthethweni.
Ezona mpawu
- Ukongeza iipakethe ze-NPM kwiprojekthi yakho.
- Enkosi kwiseva ye-dev yebhrawuza, ungayihlela ngelixa ungaxhunyiwe kwi-intanethi.
- I-URL ye-app ebanjwe esivumela ukuba sifikelele (kwaye sabelane) ne-app yethu ephilayo nangaliphi na ixesha.
- Ezinye izinto eziphawulekayo zeKhowudi ye-Visual Studio ziquka i-Intellisense, i-Project Search (Cmd/Ctrl+P), yiya kwiNgcaciso, kunye nabanye.
eziluncedo
- Ubunakho beFirebase bokusasazwa.
- Umhleli ulula kakhulu ukusebenzisa kwaye ukhawuleza kakhulu.
- Abasebenzisi banokufikelela kwipakethe.json, index.html, kunye ne index.js.
- Ikhowudi yemvelaphi ekwabelwana ngayo enokuthi ifakwe.
- Umboniso ophilayo kwicandelo elikhulu lephepha, kunye nokhetho lokuvula kwiphepha elahlukileyo ukuba kuyimfuneko.
- Ngelixa ungaxhunyiwe kwi-intanethi, ukuhlela
- Ukugqitywa ngobuchule kunye nokuphucula ubukrelekrele.
- Undoqo we-Stackblitz ngu Vula Umnikezi.
nezingeloncedo
- Awunayo impembelelo phezu kwesakhiwo okanye umncedisi womphuhlisi kuba ezo zilawulwa ngumyalelo we-creative-react-app.
- Kwi-React, ulwakhiwo lwefolda esisiseko kufuneka lujongwe.
- Akunakwenzeka ukufomatha ikhowudi ngokuzenzekelayo, nangona kunokwenzeka ukwenza oko ngesandla.
isiphelo
Kule mihla, indawo yokudlala enekhowudi efana nale siyibonile ngasentla ingasetyenziselwa ukwakha ngokupheleleyo nayiphi na iprojekthi yewebhu. Akukho mfuneko yokufaka ii-IDE ezinzima kwi-PC yakho xa unokwakha, ukulungisa iimpazamo, ukuvavanya, kunye nokuthumela ngokuthe ngqo kwisikhangeli sakho sewebhu.
Ngokombono wam, i-StackBlitz iya kuba yinto engcono kakhulu phakathi kwabo kuba yi-IDE esekwe kwiwebhu evumela iJavaScript, i-Angular, kunye nezinye iiprojekthi zophuhliso ngaphandle kwebhokisi, kungekho mfuneko yokufaka nayiphi na indawo yophuhliso lwasekhaya njengeNode.js, npm, okanye i-Angular. Ibonelela ngamava afanayo nokusebenzisa iKhowudi yeVisual Studio ekuhlaleni. Enyanisweni, ngenxa yokuba i-StackBlitz iqhutywa yiKhowudi ye-Visual Studio, ivakalelwa ngokukhawuleza kwaye iguquguqukayo njengenguqulo yedesktop.
Yeyiphi iCodePen, iCodeSandbox, kunye neStackBlitz esisixhobo sakho sokuya kuyo? Sazise kwizimvo.
Abbatyya
Enkosi ngeli nqaku limnandi, ndakuba ndabona stackblitz.com, ndiyazi ukuba yile nto ndiyifunayo.