Spații de lucru cu fire: organizați baza de cod a proiectului dvs. ca un profesionist

De fiecare dată când încep să lucrez la un proiect nou, mă întreb: „Ar trebui să folosesc depozite git separate pentru serverul meu back-end și clientul (clienții) front-end? Care este cel mai bun mod de a organiza baza de cod?”

Am avut aceeași întrebare după câteva luni de lucru pe site-ul meu personal. Inițial aveam tot codul în același depozit: back-end-ul folosea Node.js, iar front-end-ul folosea ES6 cu Pug. Am adoptat această organizație pentru comoditate, deoarece având ambele proiecte în același repo a făcut ușoară căutarea de funcții și clase și a facilitat refactorarea. Totuși, am găsit câteva dezavantaje:

• Fără implementări independente.
  Ambele aplicații foloseau același package.json și nu a existat o separare clară în ambele proiecte.
• Limite neclare.
  Deoarece mă bazez pe un package global.json , nu am avut un mecanism pentru a seta versiuni specifice pentru back-end și front-end.
• Utilități și cod partajat fără versiune.

După câteva cercetări, am descoperit că spațiile de lucru Yarn erau un instrument excelent pentru a rezolva aceste dezavantaje și a fost un instrument util pentru a crea un proiect monorepo (mai multe vor veni mai târziu!).

În acest articol, împărtășesc o introducere în spațiile de lucru Yarn. Vom parcurge împreună un tutorial despre cum să vă creați primul proiect cu acesta și vom termina cu o recapitulare și pașii următori.

Ce sunt spațiile de lucru cu fire?

Yarn este un manager de pachete de către cei de la Facebook și are o caracteristică grozavă numită spații de lucru Yarn. Spațiile de lucru Yarn vă permit să vă organizați baza de cod a proiectului folosind un depozit monolitic (monorepo). Ideea este că un singur depozit ar conține mai multe pachete. Pachetele sunt izolate și ar putea trăi independent de proiectul mai mare.

Ca alternativă, am putea plasa toate aceste pachete în depozite separate. Din păcate, această abordare afectează partajarea, eficiența și experiența dezvoltatorului atunci când se dezvoltă pachetele și proiectele dependente de acestea. În plus, atunci când lucrăm într-un singur depozit, ne putem deplasa mai rapid și putem construi instrumente mai specifice pentru a îmbunătăți procesele pentru întregul ciclu de viață al dezvoltării.

Proiectele Monorepo au fost acceptate pe scară largă de companii mari precum Google sau Facebook și s-au dovedit că monorepo se poate extinde.

„

React este un bun exemplu de proiect open-source care este monorepo. De asemenea, React folosește spațiile de lucru Yarn pentru a atinge acest scop. În secțiunea următoare vom învăța cum să creăm primul nostru proiect monorepo cu Yarn.

Crearea unui proiect Monorepo cu React și Express folosind spații de lucru cu fire în șase pași

Până acum, am aflat ce este Yarn, ce este un monorepo și de ce Yarn este un instrument excelent pentru a crea un monorepo. Acum să învățăm de la zero cum să configurați un nou proiect folosind spațiile de lucru Yarn. Pentru a continua, veți avea nevoie de un mediu de lucru cu o instalare npm actualizată. Descărcați codul sursă.

Cerințe preliminare

Pentru a finaliza complet acest tutorial, va trebui să aveți Yarn instalat pe mașina dvs. Dacă nu ați instalat Yarn înainte, vă rugăm să urmați aceste instrucțiuni.

Aceștia sunt pașii pe care îi vom urma în acest tutorial:

1. Creați-vă proiectul și spațiul de lucru rădăcină
2. Creați un proiect React și adăugați-l la lista spațiului de lucru
3. Creați un proiect expres și adăugați-l în spațiul de lucru
4. Instalați toate dependențele și salutați yarn.lock
5. Utilizarea unui wildcard (*) pentru a importa toate pachetele dvs
6. Adăugați un script pentru a rula ambele pachete

1. Creați-vă proiectul și spațiul de lucru rădăcină

În terminalul mașinii locale, creați un nou folder numit example-monorepo :

 $ mkdir example-monorepo

În interiorul folderului, creați un nou package.json cu spațiul nostru de lucru rădăcină.

 $ cd example-monorepo $ touch package.json

Acest pachet ar trebui să fie privat pentru a preveni publicarea accidentală a spațiului de lucru rădăcină. Adăugați următorul cod în noul fișier package.json pentru a face pachetul privat:

 { "private": true, "name": "example-monorepo", "workspaces": [], "scripts": {} }

2. Creați un proiect React și adăugați-l la lista spațiului de lucru

În acest pas, vom crea un nou proiect React și îl vom adăuga la lista de pachete din spațiul de lucru rădăcină.

Mai întâi, să creăm un folder numit pachete în care vom adăuga diferitele proiecte pe care le vom crea în tutorial:

 $ mkdir packages

Facebook are o comandă pentru a crea noi proiecte React: create-react-app . O vom folosi pentru a crea o nouă aplicație React cu toate configurațiile și scripturile necesare. Creăm acest nou proiect cu numele „client” în folderul de pachete pe care l-am creat la pasul 1.

 $ yarn create react-app packages/client

Odată ce am creat noul nostru proiect React, trebuie să îi spunem lui Yarn să trateze acel proiect ca pe un spațiu de lucru. Pentru a face asta, trebuie pur și simplu să adăugăm „client” (numele pe care l-am folosit mai devreme) în lista „spații de lucru” din rădăcina package.json . Asigurați-vă că utilizați același nume pe care l-ați folosit când rulați comanda create-react-app .

 { "private": true, "name": "example-monorepo", "workspaces": ["client"], "scripts": {} }

3. Creați un proiect expres și adăugați-l în spațiul de lucru

Acum este timpul să adăugați o aplicație back-end! Folosim express-generator pentru a crea un schelet Express cu toate configurațiile și scripturile necesare.

Asigurați-vă că aveți express-generator instalat pe computer. Îl puteți instala folosind Yarn cu următoarea comandă:

 $ yarn global add express-generator --prefix /usr/local

Folosind express-generator , creăm o nouă aplicație Express cu numele „server” în dosarul pachetelor .

 $ express --view=pug packages/server

În cele din urmă, adăugați noul pachet „server” în lista de spații de lucru din interiorul pachetului rădăcină.json .

 { "private": true, "name": "example-monorepo", "workspaces": ["client", "server"], "scripts": {} }

Notă : Acest tutorial este simplificat cu doar două pachete (server și client). Într-un proiect, este posibil să aveți de obicei câte pachete aveți nevoie și, prin convenție, comunitatea open-source utilizează acest model de denumire: @your-project-name/package-name . De exemplu: folosesc @ferreiro/server pe site-ul meu.

4. Instalați toate dependențele și salutați yarn.lock

Odată ce am adăugat aplicația noastră React, precum și serverul nostru Express, trebuie să instalăm toate dependențele. Spațiile de lucru Yarn simplifică acest proces și nu mai trebuie să mergem la fiecare aplicație și să le instalăm manual dependențele. În schimb, executăm o singură comandă - yarn install - și Yarn face magia pentru a instala toate dependențele pentru fiecare pachet și pentru a le optimiza și stoca în cache.

Rulați următoarea comandă:

 $ yarn install

Această comandă generează un fișier yarn.lock (similar cu acest exemplu). Conține toate dependențele pentru proiectul dvs., precum și numerele de versiune pentru fiecare dependență. Yarn generează acest fișier automat și nu ar trebui să îl modificați.

5. Utilizarea unui wildcard (*) pentru a importa toate pachetele dvs

Până acum, pentru fiecare pachet nou adăugat, am fost forțați să actualizăm și pachetul rădăcină.json pentru a include noul pachet în lista de spații de workspaces:[] .

Putem evita acest pas manual folosind un wildcard (*) care îi spune lui Yarn să includă toate pachetele în folderul pachete .

În interiorul pachetului rădăcină.json , actualizați conținutul fișierului cu următoarea linie: "workspaces": ["packages/*"]

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": {} }

6. Adăugați un script pentru a rula ambele pachete

Ultimul pas! Trebuie să avem o modalitate de a rula ambele pachete - clientul React și clientul Express - simultan. Pentru acest exemplu, vom folosi concurrently . Acest pachet ne permite să rulăm mai multe comenzi în paralel.

Adăugați concurrently la pachetul rădăcină.json :

 $ yarn add -W concurrently

Adăugați trei scripturi noi în spațiul de lucru rădăcină package.json . Două scripturi inițializează clienții React și Express în mod independent; celălalt folosește concurrently pentru a rula ambele scripturi în paralel. Consultați acest cod pentru referință.

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": { "client": "yarn workspace client start", "server": "yarn workspace server start", "start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" } }

Notă : Nu va trebui să scriem scripturile noastre de start în pachetele „server” și „client”, deoarece instrumentele pe care le-am folosit pentru a genera acele pachete ( create-react-app și express-generator ) adaugă deja acele scripturi pentru noi. Deci suntem gata de plecare!

În cele din urmă, asigurați-vă că actualizați scriptul de pornire Express pentru a rula serverul Express pe portul 4000. În caz contrar, clientul și serverul vor încerca să folosească același port (3000).

Accesați pachete/server/bin/www și schimbați portul implicit în linia 15.

 var port = normalizePort(process.env.PORT || '4000');

Acum suntem gata să ne rulăm pachetele!

 $ yarn start

Unde să mergi de aici

Să recapitulăm ceea ce am acoperit. În primul rând, am aflat despre spațiile de lucru Yarn și de ce este un instrument excelent pentru a crea un proiect monorepo. Apoi, am creat primul nostru proiect JavaScript monorepo folosind Yarn și am împărțit logica aplicației noastre în mai multe pachete: client și server. De asemenea, am creat primele noastre scripturi de bază npm și am adăugat dependențele necesare pentru fiecare aplicație.

Din acest punct, aș sugera să revizuiți proiectele open-source în detaliu pentru a vedea cum folosesc spațiile de lucru Yarn pentru a împărți logica proiectului în mai multe pachete. React este unul bun.

De asemenea, dacă doriți să vedeți un site web de producție folosind această abordare pentru a separa aplicațiile back-end și front-end în pachete independente, puteți verifica sursa site-ului meu, care include și un administrator de blog. Când am migrat baza de cod pentru a utiliza spațiile de lucru Yarn, am creat o cerere de extragere cu Kyle Wetch.

Mai mult, am configurat infrastructura pentru un proiect hackathon care folosește spații de lucru React, webpack, Node.js și Yarn și puteți verifica codul sursă aici.

În cele din urmă, ar fi foarte interesant să înveți cum să-ți publici pachetele independente pentru a te familiariza cu ciclul de viață al dezvoltării. Există câteva tutoriale care sunt interesante de verificat: yarn publish sau npm publish.

Pentru orice comentarii sau întrebări, nu ezitați să mă contactați pe Twitter. De asemenea, în lunile următoare voi publica mai mult conținut despre asta pe blogul meu, astfel încât să vă puteți abona și acolo. Codare fericită!