Si të konfiguroni mjedisin tuaj të zhvillimit të javascript (PJESA 1)
Ndërtimi i një mjedisi zhvillimi javascript nga e para mund të jetë dërrmues, por me një shabllon të personalizuar, ju mund të kurseni kohën e çmuar juve dhe ekipeve tuaja.
Pavarësisht nga staku ose roli juaj, klienti ose serveri. Ne do të ndërtojmë një mjedis të fuqishëm dhe interaktiv javascript që ju mundëson të filloni projektin tuaj në asnjë kohë.
Para se të fillojmë, depoja e projektit mund të gjendet "këtu".
Për të ndërtuar një mjedis të fortë zhvillimi javascript, ne do të shqyrtojmë shumë gjëra që i kam ndarë në nëntemat si më poshtë:
- Redaktorët dhe Mjediset
- Menaxhimi i paketës
- Zhvillimi i serverit në internet
- Automatizimi
- Transpilimi
- Paketimi
- Grimca
- Testimi dhe konfigurimi
- Thirrjet Http
- Struktura e projektit
- Ndërtimi i prodhimit
- Shpërndarja e prodhimit
- Redaktorët dhe mjediset
Për disa arsye, zgjedhja e një redaktuesi kodi mund të jetë një temë debati midis inxhinierëve.
Sidoqoftë, pavarësisht nga preferenca juaj, redaktuesit e mëposhtëm të kodit janë ende zgjedhje të mira për të zgjedhur.
- Atomi
- Webstorm
- Kllapa
- VSCkodi
Unë përdor VSCode, por të gjithë këta redaktues kodesh ofrojnë
Inteligjenca e mirë, kështu që mund të shkoni përtej theksimit të sintaksës dhe plotësimit automatik me IntelliSense, i cili ofron plotësime inteligjente bazuar në llojet e variablave, përkufizimet e funksioneve dhe modulet e importuara.
Komandat Git të integruara.
Mund të rishikoni ndryshimet, të vini në skenë skedarë dhe të bëni detyrime direkt nga redaktori. Shty dhe tërhiqe nga çdo shërbim SCM i pritur.
2. Menaxhimi i paketave
Kur menaxhoni projektin tuaj të bazuar në javascript, ka grupe të menaxherëve të paketave nga të cilat mund të zgjidhni:
Npm, Bower, jspm, jam, Volo
Bower:
Bower mund të menaxhojë komponentët që përmbajnë HTML, CSS, JavaScript, shkronja apo edhe skedarë imazhi. Bower nuk bashkon ose minimizon kodin ose nuk bën ndonjë gjë tjetër – ai thjesht instalon versionet e duhura të paketave që ju nevojiten dhe varësitë e tyre.
Sidoqoftë, me kalimin e viteve, npm që është menaxheri i paketave për platformën Node JavaScript ka rrëzuar bower dhe tani është menaxheri më i përdorur i paketave për disa arsye (që nuk është objekti i këtij diskutimi).
Ne do të përdorim npm gjatë gjithë rrjedhës së këtij projekti.
3. Zhvillimi i serverit të uebit
Pra, mjaft histori, le të hyjmë në biznes. Sigurisht, kur po filloni një projekt Javascript, do të dëshironi të merrni në konsideratë të keni një server web zhvillimi.
Ashtu si menaxherët e paketave, ka grupe të serverëve në internet për të zgjedhur.
- Http-server
- server i drejtpërdrejtë
Ose edhe serverë të bazuar në funksione si p.sh
- shprehin
- Budo
- Serveri i devijimit në uebpack
Për hir të këtij projekti, ne do të përdorim Express
Express është një kornizë minimale dhe fleksibël aplikacioni në ueb Node.js që ofron një grup të fuqishëm funksionesh për aplikacionet në ueb dhe celular.
Le të fillojmë duke vendosur projektin tonë:
npm init
Npm init krijon një skedar package.json për ju, ne do të instalojmë disa varësi të cilat do t'i përdorim në hapa të ndryshëm gjatë rrjedhës së projektit.
Kopjoni të dhënat e mëposhtme në skedarin tuaj package.json.
Ekzekutoni npm install për të instaluar të gjitha varësitë
Tani që keni instaluar varësi, për të siguruar uniformitet dhe për t'u siguruar që të gjithë kanë të njëjtin konfigurim të redaktuesit, instaloni shtojcën editorconfig në redaktorin tuaj të kodit
- Krijoni një skedar .editorconfig dhe kopjoni në të sa vijon
- Ju gjithashtu mund të merrni konfigurimin në faqen e internetit të editorconfig këtu
# EditorConfig është i mrekullueshëm: https://EditorConfig.org
# skedari më i lartë EditorConfig
rrënjë = e vërtetë
# Linjat e reja të stilit Unix me një rresht të ri që përfundon çdo skedar
[*]
fund_of_line = lf
# insert_final_newline = e vërtetë
# Përputhet me shumë skedarë me shënimin e zgjerimit të kllapave
# Cakto grupin e parazgjedhur të karaktereve
[*.{js,py}]
grupin e karaktereve = utf-8
# Mbështetja e dhëmbëzimit për të gjitha JS-të nën drejtorinë lib
[lib/**.js]
stili_indent = hapësira
madhësia_indent = 2
# Përputhet me skedarët e saktë ose package.json ose .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
[*.md]
trim_trailing_whitespace = false
Përdorimi i kësaj siguron që ne po ndjekim një standard uniform të redaktimit të kodit.
3.1 Siguria
Ne po ndërtojmë një mjedis të fuqishëm zhvillimi javascript, siguria nuk është një opsion. Fatmirësisht, nyja ka platformën e vet të integruar të sigurisë të quajtur platforma e sigurisë së nyjeve.
Platforma e Sigurisë së Nyjeve është një grup produktesh dhe shërbimesh të vazhdueshme sigurie të përqendruara në ndihmën që ju të dërgoni dhe mirëmbani softuer të sigurt të nyjeve. Mund ta instalojmë globalisht duke përdorur komandën
npm i -g nsp
Ne mund të përdorim komandën nsp nsp check për të kryer një seri kontrollesh kundër varësive tona.
3.2 Express
Tani që kemi instaluar varësitë e nevojshme dhe kemi kontrolluar për dobësi, le të vendosim tani Express. Për të instaluar Express, ashtu siç bëmë për nsp, ekzekutoni npm install express.
Krijoni një dosje të quajtur buildScripts.js në direktorinë tuaj rrënjësore dhe krijoni një skedar srcServer.js brenda tij.
Brenda srcServer.js, shkruani linjat e mëposhtme të kodit
import express nga express;
importi shteg nga 'rruga';
importi i hapur nga i hapur;
var port = 3000; // ne deklaruam portin në të cilin serveri ynë do të funksionojë
var app = express();
app.get('/', (kërkesë, res)=›{
res.sendFile(rruga.join(__dirname, '../src/index.html'))
});
app.listen(port, (err)=›{
if(arr){
console.log(err);
other{
open(' http://localhost:' + port)
});
Pra, në thelb ne importojmë module express, path dhe open. Path dhe open janë ndërtuar në modulet node js të cilat ne mund t'i importojmë në çdo kohë gjatë projektit tonë pa pasur nevojë t'i instalojmë ato veçmas. Ne kemi përdorur gjithashtu sintaksën express() e cila është ekuivalente e të thënit new express(). Krijon një shembull të ri të shprehjes që më pas mund t'ia caktoni një ndryshoreje dhe të ndërveproni me të. Ne kemi kërkuar gjithashtu një skedar (index.html) të cilin do ta krijojmë së shpejti, shpresojmë ta japim këtë skedar sa herë që të ekzekutojmë serverin.
Së fundi, ne dëgjuam portin tonë (3000) dhe regjistruam një gabim në rastin kur hasëm një gabim.
Pra, me këtë, ne kemi një server bazë që funksionon në një port të paracaktuar.
3.3 Ndarja e punës suaj në vazhdim
Unë e kuptoj se në çdo moment në kohë gjatë ndërtimit të një projekti, mund të dëshironi të ndani punën tuaj në vazhdim. Kjo nuk duhet të jetë vërtet një gjë e vështirë. Ka mënyra të ndryshme për të ndarë punën tuaj në vazhdim. Ka platforma të ndryshme që ofrojnë këtë funksion. Këto përfshijnë
- Ngrok
- LocalTunnel
- Tani
- Rritje
Ndërsa secila ofron avantazhet dhe disavantazhet e veta relative ndaj njëri-tjetrit. Unë do t'ju këshilloj të kontrolloni dokumentacionin e tyre për të mësuar më shumë. Zgjodha tunelin lokal për shkak të thjeshtësisë së tij.
Instalo localtunnel globalisht duke ekzekutuar npm install localtunnel -g
Pastaj ekzekutoni lt-h “http://serverless-social” -p -3000 ku 3000 i referohet portit ku po ekzekutoni. Tuneli lokal funksionon duke vendosur shpejt nyjen në re dhe ju jep menjëherë një lidhje aksesi
3.4 Përfundim
Për të mos ju mërzitur, vendosa ta ndaj këtë artikull në pjesë. Deri më tani, ne kemi qenë në gjendje të mbulojmë kërkesa të rëndësishme për të ndërtuar një zonë të sigurt dhe efektive të zhvillimit të javascript.
Në Pjesën 2 të këtij neni, ne do të trajtojmë nëntitullin 4–7
- Automatizimi
- Transpilimi
- Paketimi
- Grimca
