Ho sebetsa morerong o rarahaneng, ekaba u setsebi sa mananeo a nang le boiphihlelo kapa motho ea sa tsoa qala, u ka 'na ua thulana le mathata. Ha o arola morero oa hau ka li-module tse ngata, ho hlaha mathata, ho etsa hore ho be thata ho latela liphoso le ho fumana tharollo. Maemong a mang, ho rarolla bothata ka bomong ho ka ba thata hobane ha o so fumane tharollo e nepahetseng bothateng boo esale o sebetsa ho bona.
E boetse e hlaha e le karolo ea khoutu ka linako tse ling, e ka shebahalang e rarahane ka nako eo. JavaScript ke e 'ngoe ea lipuo tse thehiloeng Marang-rang tseo ho leng bonolo haholo ho li ithuta. Qala feela sebatli sa hau sa komporo ebe u ea ho Lisebelisoa tsa Moetsi (hangata F12), 'me u qetile! U ka 'na ua leka JS ntle le ho hloka ho kenya kapa ho sebelisa software leha e le efe e rarahaneng.
Ho qala, sohle seo u se hlokang ke sebatli. Hoa babatseha ho ba le bonolo bona ka ntle ho lebokose, empa ho na le linako tseo ka tsona u hlokang tse ling. Ka mohlala, ha re re u batla ho leka Web API e ncha eo u sa tsoa e fumana empa u sa batle ho qala morero o mocha.
Ka poso ena, re tla bapisa le ho bapisa mabala a mararo a tummeng a JS, CodePen, CodeSandbox, le StackBlitz. Ha re qaleng!
Khoutu eaPen
Lisebelisoa tsa ntlafatso ea tepo ea Frontend li lula li fetoha, 'me bahlophisi ba mongolo ke karolo e kholo ea litheknoloji tsa morao-rao tse nolofatsang bophelo ba moqapi. Ntle le bahlophisi ba mongolo ba ikemetseng joalo ka Atom kapa Notepad ++, ho bile le ho phatloha ho hoholo ha bahlophisi ba sebatli lilemong tsa morao tjena ba sa hlokeng ho kenya lenaneo le ho khothaletsa tšebelisano e kholo.
CodePen ke "sechaba sa Marang-rang sa ho etsa liteko le ho hlahisa HTML, CSS, le JavaScript tse entsoeng ke basebelisi" se fanang ka menyetla e metle ea ho ithuta ho ngola maqephe a webo a ka pele hamolemo.
CodePen e u fa "mekhoa" e 'meli. Ea pele le e sebelisoang haholo ke Pene. Ho bonolo joalo ka ho tobetsa konopo ebe o isoa ho mohlophisi. Ho tloha moo, o ka fihlella phanele ea ponelopele hammoho le HTML ea mantlha, CSS, le editing ea JS windows.
Ha ho na "sistimi ea lifaele," "IntelliSense," kapa eng kapa eng - e mpa feela e totobatsa li-syntax le litaelo tse potlakileng joalo ka prettify. Ho tab ea likhetho, u ka khetha ho tsoa lethathamong le thibetsoeng la li-preprocessor bakeng sa lipuo tsohle tse tharo (joalo ka TypeScript bakeng sa JS) kapa oa eketsa likhokahano mehloling e kantle.
Haeba u hloka feela eng kapa eng e etsoang mahala, e mong oa bahlophisi ba tla lekane. Ke khothaletsa CodePen bakeng sa eng kapa eng e sa hlokeng ho hlophisoa kapa lilaeborari tse ngata - feela HTML, CSS, le JS tse nang le li-pre-processor tse ka holimo. Haeba u batla ho sebelisa lebala la lipapali ho ntlafatsa boteng ba hau ba mecha ea litaba ea sechaba kapa ho theha potefolio ea hau, CodePen ke khetho e ntle.
Premium Version
U na le mekhoa e meng e 'maloa eo u ka e khethang ho CodePen. Haeba u lefa selemo le selemo, u ka fumana e 'ngoe ea merero e meraro ea premium bakeng sa $12, $19, kapa $39 khoeli le khoeli. U ka etsa palo e sa feleng ea lipene tsa poraefete, li-post, le pokello ho efe kapa efe ea mekhahlelo e meraro.
Hape o tla fumana beche ea Pro (matla a sechaba), mokhoa oa ho sebelisana ka kotloloho, ha ho na papatso, le tse ling. Ho boetse ho na le maqheka a ikhethileng a sehlopha le liphapang tse ling tse fapaneng. Sheba boto ea bona ea molao ea litefiso bakeng sa lintlha tse ling.
Features senotlolo
Ntle le ho theha HTML, CSS, le JavaScript ho CodePen, ho na le lintho tse ling tse 'maloa tse e khethollang.
- Hoa khoneha ho shebella khoutu ea hau ka nako ea 'nete. Ha e hloke ho bokelloa.
- Ho etsa liteko ho u lumella ho ithuta lintho tse ncha.
- Etsa liteko tse nyane ho sheba le ho rarolla mathata.
- Bontša mesebetsi ea hao e hlollang.
- Etsa le ho boloka Lipene bakeng sa tšebeliso ea morao.
- Leka khoutu ea bahlahisi ba bang 'me u e bone e sebetsa.
le menyetla
- Ho qala, ha ho na litšenyehelo.
- Lisebelisoa tsa ho ithuta tse hahelletsoeng.
- Sebelisana 'moho le ba bang' me u bapise merero ho bona moo ba ka eang teng nakong e tlang.
- UI e bonolo ho e sebelisa ebile e bonolo.
go tlhoka mesola
- Laeborari ea likhoutu e nyane, ho phethela khoutu ea auto-code ha hoa lekana. E loketse merero ea leqephe le le leng 'me ha e khone ho sebetsana le letho le leholoanyane.
- Ho CodePen, o ka etsa lipene tsa poraefete, empa o tla hloka ho ntlafatsa ho ba setho sa Pro ($ 9/ khoeli).
khoutu ea sandbox
CodeSandbox ke mohlophisi oa khoutu ea marang-rang. E iketsetsa tsamaiso ea transpiring, ho paka le ho itšetleha ka uena, e u lumellang hore u hahe morero o mocha ka ho tobetsa hang feela. Kamora ho etsa ntho e khahlisang, u ka e arolelana le ba bang ka ho arolelana webosaete feela.
Sehlophisi se lumellana le merero efe kapa efe ea JavaScript, leha e kenyelletsa likarolo tse itseng tse ikhethileng tsa React, joalo ka khetho ea ho boloka projeke ho thempleite ea ho theha-react-app.
Morero ofe kapa ofe oo o o hahang ho CodeSandbox o qala ka template. E ka amana le laeborari e itseng, moralo, kapa nako ea ho sebetsa (ho kenyeletsoa Node.js) kapa ea sebelisa mekhoa e tloaelehileng ea tekhenoloji ea webo. Ka mor'a ho khetha template, u romeloa ho mohlophisi, moo u tla fumana lifaele tsohle tse hlokahalang le fensetere ea ponelopele e se e ntse e butsoe.
U na le monyetla oa ho fumana "sistimi ea lifaele" ka har'a li-Sandboxes tsohle, ho bolelang hore u ka etsa lifaele tse ncha, ua sebelisa li-module (ho kenyeletsoa liphutheloana tsa NPM), 'me u sebelisana le thepa e sa fetoheng. Hape ho na le monyetla oa ho fetola lifaele tsa tlhophiso tse khethehileng tsa template.
U kanna ua iketsetsa litempele tsa hau bakeng sa nyeoe ea hau e ikhethang, e felletseng ka sebopeho sa faele le litšepeho, joalo ka ho IDE. Hobane sesebelisoa se hokahane le Github, o ka hlahisa li-commit kapele le ho bula li-PR. U ka romella kopo ea hau ho ZEIT kapa Netlify hang-hang.
CodeSandbox Team Pro
CodeSandbox, khoebo ea Madache e lumellang batho ba ntlafatsang ho haha lebokose la ntlafatso ea lisebelisoa tsa marang-rang tse thehiloeng ho sebatli, e lokolotse ka molao sethala sa tšebelisano se lumellang lihlopha ho sebetsa ka khoutu marung. Sehlahisoa se secha, Team Pro, ke tharollo e se nang khoutu e hahiloeng bakeng sa lihlopha tse felletseng tsa lihlahisoa, ho tloha ho baqapi le batsamaisi ka lihlopha tsa netefatso ea boleng (QA) le ho feta.
Merero e fanoa ka sebopeho se bonolo sa basebelisi bakeng sa mang kapa mang ea lakatsang ho etsa kapa ho amohela liphetoho ts'ebelisong ea webo, ho qoba mekhoa e meng e joalo ka ho romella lintlha le likhothaletso ho bahlahisi ho etsa liphetoho, ho li fetisetsa bakeng sa lipuisano, le ho pheta ts'ebetso.
Features senotlolo
- Mohlophisi oa khoutu ea marang-rang le sesebelisoa sa prototype.
- Bakeng sa ts'ebeliso ea lehae, sandbox e ka khoasolloa habonolo faeleng ea zip.
- mananeo e etsoa ka mabokose a lehlabathe, a ka arolelanoang habonolo le basebetsi-'moho.
le menyetla
- Boiphihlelo bo ntlafalitsoeng ba mosebelisi le taolo e kholo holim'a mohlophisi.
- Sebopeho sa ponelopele se phelang se ka fetoloa le ho shejoa ka fensetere e arohaneng.
- Khoutu e hlophisitsoe ka bo eona mme e kenyelletsa CLI (codesandbox-cli)
- Ts'ehetso ea li-module tsa npm tse tsoetseng pele.
- Melaetsa e metle ea liphoso e nang le likhothaletso.
- E ntlafatsa boiphihlelo ba ho lokisa liphoso ka ho fana ka terminal e betere, sebali sa liteko, le sebali sa litaba.
go tlhoka mesola
- Moreki oa ho qetela o pepesehetse lintho tse ngata tsa botho.
- Ho hula le ho theola lifaele komporong ea lehae ha e sebetse hantle.
- Sebopeho se itseng sa foldara se tlameha ho lateloa ho CodeSandbox.
- Ts'ebetso ea sandbox ea poraefete e fumaneha feela ho bareki.
Tlhaloso ea Matla
StackBlitz ke Visual Studio Code e sebelisoang marang-rang IDE bakeng sa lits'ebetso tsa webo. Sethala se arabela hantle ebile se fetoha le maemo joalo ka mofuta oa desktop. StackBlitz ke IDE ea inthaneteng e tlang e kentsoe esale pele Angular le React lisebelisoa tsa ntlafatso.
Thinkster.io e hahile projeke eo e ntle ho etsa hore ho be bonolo kamoo ho ka khonehang ho qala ka projeke ea hau ea Angular kapa React ntle le ho tšoenyeha ka ho kenya ts'epo kapa ho aha litlhophiso. StackBlitz e fana ka likarolo tse ngata tse makatsang le tse ikhethang tseo ho seng mohlophisi e mong oa khoutu ea inthaneteng a nang le tsona hajoale. Ka lebaka leo, ho bohlokoa ho etsa lipatlisiso tsa StackBlitz ho ea pele le ho fumana hore na IDE ena ea inthanete e fana ka eng.
Stackblitz e bapisoa haholo le IDE e felletseng, haholo haeba o sa khone ho lumelisa khoutu ea VS hobane sesebelisoa se thehiloe ho eona. Sephutheloana se na le likarolo tse fapaneng tse u lumellang ho qala le ho tsoela pele ho theha sesebelisoa se felletseng.
Lenaneo le tsamaisoa ke Visual Studio, e tsebahalang haholo har'a bahlahisi. Ho hlophisa kantle ho Marang-rang ke tšobotsi e hlahelletseng ea projeke. Ho etsa hore sena se khonehe, sehlopha sa Stackblitz se thehile sebatli sa marang-rang se kahare ho sebatli. Ha u ntse u thaepa, e kenya ka bo eona ho itšetleha, ho bokella, ho bokella, 'me e kenya bocha bocha.
Premium Version
Cadet, Astronaut, le Commander li fumaneha mahala, $8/ khoeli, le $29/ khoeli, ka ho latellana. Astronaut le Commander li kenyelletsa likarolo tse ngata joalo ka merero ea poraefete e sa lekanyetsoang, ho kenya lifaele tse sa lekanyetsoang, ho memela mocha oa mantlha oa sehlopha, joalo-joalo. Ho fumana lintlha tse ling, sheba boto ea molao ea litefiso.
Features senotlolo
- E eketsa liphutheloana tsa NPM morerong oa hau.
- Ka lebaka la "browser dev" e ncha, u ka e hlophisa ha u ntse u le sieo inthaneteng.
- URL ea app e amohetsoeng e re lumellang ho fihlella (le ho arolelana) sesebelisoa sa rona ka nako efe kapa efe.
- Likarolo tse ling tse hlokomelehang tsa Visual Studio Code li kenyelletsa Intellisense, Patlo ea Morero (Cmd/Ctrl+P), Eya ho Tlhaloso, le tse ling.
le menyetla
- Bokhoni ba Firebase bakeng sa ho tsamaisa.
- Sehlophisi se bonolo ho se sebelisa ebile se potlakile haholo.
- Basebelisi ba ka fihlella package.json, index.html, le index.js.
- Khoutu ea mohloli e ka arolelanoang eo le eona e ka kengoang.
- Ponahalo e teng karolong e kholo ea leqephe, ka khetho ea ho bula leqepheng le fapaneng ha ho hlokahala.
- Ha u ntse u le Offline, Editing
- Liphetho tse bohlale le Intellisense e ntlafalitsoeng.
- Moko oa Stackblitz ke Mohloli o bulehileng.
go tlhoka mesola
- Ha u na tšusumetso holim'a moaho kapa seva ea nts'etsopele hobane li laoloa ke taelo ea create-react-app.
- Ho React, sebopeho sa foldara sa mantlha se lokela ho bonoa.
- Ha ho khonehe ho fomata khoutu ka bo eona, leha ho ka khoneha ho e etsa ka letsoho.
fihlela qeto e
Matsatsing ana, lebala la lipapali la likhoutu joalo ka tseo re li boneng kaholimo li ka sebelisoa ho aha projeke efe kapa efe ea webo ka botlalo. Ha ho na lebaka la ho kenya li-IDE tse boima ho komporo ea hau ha o khona ho haha, ho lokisa liphoso, ho leka, le ho tsamaisa ka kotloloho ho tsoa ho sebatli sa hau sa marang-rang.
Ka maikutlo a ka, StackBlitz e tla ba molemo ka ho fetisisa har'a bona hobane ke IDE e thehiloeng marang-rang e lumellang JavaScript, Angular, le merero e meng ea nts'etsopele ka ntle ho lebokose, ho sa hlokahale ho kenya libaka leha e le life tsa ntlafatso ea lehae joaloka Node.js, npm, kapa Angular. E fana ka boiphihlelo bo tšoanang le ba ho sebelisa Visual Studio Code sebakeng sa heno. Ha e le hantle, hobane StackBlitz e tsamaisoa ke Visual Studio Code, e ikutloa e potlakile ebile e tenyetseha joaloka mofuta oa desktop.
Ke efe ho CodePen, CodeSandbox, le StackBlitz eo u ka eang ho eona? Re tsebise litlhalosong.
Abbatyya
Ke leboha sengoloa sena se setle, hang ha ke bona stackblitz.com, kea tseba hore sena ke seo ke se batlang.