Aree di lavoro filati: organizza la codebase del tuo progetto come un professionista

Ogni volta che inizio a lavorare su un nuovo progetto, mi chiedo: "Dovrei usare repository git separati per il mio server back-end e i miei client front-end? Qual è il modo migliore per organizzare la codebase?"

Ho avuto la stessa domanda dopo alcuni mesi di lavoro sul mio sito Web personale. Inizialmente avevo tutto il codice nello stesso repository: il back-end utilizzava Node.js e il front-end utilizzava ES6 con Pug. Ho adottato questa organizzazione per comodità, poiché avere entrambi i progetti nello stesso repository ha semplificato la ricerca di funzioni e classi e facilitato i refactoring. Tuttavia, ho riscontrato alcuni aspetti negativi:

• Nessuna distribuzione indipendente.
  Entrambe le app utilizzavano lo stesso package.json e non c'era una netta separazione su entrambi i progetti.
• Confini poco chiari.
  Dato che mi affido a un pacchetto globale.json , non avevo un meccanismo per impostare versioni specifiche per il back-end e il front-end.
• Utilità e codice condivisi senza controllo delle versioni.

Dopo alcune ricerche, ho scoperto che gli spazi di lavoro di Yarn erano un ottimo strumento per risolvere questi svantaggi ed era uno strumento utile per creare un progetto monorepo (ne parleremo più avanti!).

In questo articolo, condivido un'introduzione alle aree di lavoro Yarn. Faremo insieme un tutorial su come creare il tuo primo progetto con esso e finiremo con un riepilogo e i passaggi successivi.

Cosa sono le aree di lavoro del filato?

Yarn è un gestore di pacchetti delle persone di Facebook e ha un'ottima funzionalità chiamata Yarn workspaces. Le aree di lavoro Yarn ti consentono di organizzare la base di codice del tuo progetto utilizzando un repository monolitico (monorepo). L'idea è che un singolo repository contenga più pacchetti. I pacchetti sono isolati e potrebbero vivere indipendentemente dal progetto più ampio.

In alternativa, potremmo inserire tutti questi pacchetti in repository separati. Sfortunatamente, questo approccio influisce sulla condivisibilità, l'efficienza e l'esperienza degli sviluppatori durante lo sviluppo sui pacchetti e sui progetti dipendenti. Inoltre, quando lavoriamo in un unico repository possiamo muoverci più rapidamente e costruire strumenti più specifici per migliorare i processi per l'intero ciclo di vita dello sviluppo.

I progetti Monorepo sono stati ampiamente accettati da grandi aziende come Google o Facebook e hanno dimostrato che monorepo può scalare.

“

React è un buon esempio di progetto open source che è monorepo. Inoltre, React utilizza le aree di lavoro Yarn per raggiungere tale scopo. Nella prossima sezione impareremo come creare il nostro primo progetto monorepo con Yarn.

Creazione di un progetto Monorepo con React ed Express utilizzando gli spazi di lavoro del filato in sei passaggi

Finora, abbiamo imparato cos'è Yarn, cos'è un monorepo e perché Yarn è un ottimo strumento per creare un monorepo. Ora impariamo da zero come impostare un nuovo progetto utilizzando le aree di lavoro Yarn. Per continuare, avrai bisogno di un ambiente di lavoro con un'installazione npm aggiornata. Scarica il codice sorgente.

Prerequisiti

Per completare completamente questo tutorial, dovrai avere Yarn installato sulla tua macchina. Se non hai mai installato Yarn, segui queste istruzioni.

Questi sono i passaggi che seguiremo in questo tutorial:

1. Crea il tuo progetto e esegui il root dell'area di lavoro
2. Crea un progetto React e aggiungilo all'elenco dell'area di lavoro
3. Crea un progetto Express e aggiungilo all'area di lavoro
4. Installa tutte le dipendenze e saluta yarn.lock
5. Utilizzo di un carattere jolly (*) per importare tutti i tuoi pacchetti
6. Aggiungi uno script per eseguire entrambi i pacchetti

1. Crea il tuo progetto e esegui il root dell'area di lavoro

Nel terminale della tua macchina locale, crea una nuova cartella chiamata example-monorepo :

 $ mkdir example-monorepo

All'interno della cartella, crea un nuovo package.json con il nostro spazio di lavoro principale.

 $ cd example-monorepo $ touch package.json

Questo pacchetto dovrebbe essere privato per impedire la pubblicazione accidentale dell'area di lavoro principale. Aggiungi il codice seguente al tuo nuovo file package.json per rendere privato il pacchetto:

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

2. Crea un progetto React e aggiungilo all'elenco dell'area di lavoro

In questo passaggio creeremo un nuovo progetto React e lo aggiungeremo all'elenco dei pacchetti all'interno dell'area di lavoro principale.

Per prima cosa, creiamo una cartella chiamata packages in cui aggiungeremo i diversi progetti che creeremo nel tutorial:

 $ mkdir packages

Facebook ha un comando per creare nuovi progetti React: create-react-app . Lo useremo per creare una nuova app React con tutta la configurazione e gli script richiesti. Stiamo creando questo nuovo progetto con il nome "client" all'interno della cartella dei pacchetti che abbiamo creato nel passaggio 1.

 $ yarn create react-app packages/client

Dopo aver creato il nostro nuovo progetto React, dobbiamo dire a Yarn di trattare quel progetto come uno spazio di lavoro. Per fare ciò, dobbiamo semplicemente aggiungere "client" (il nome che abbiamo usato in precedenza) all'interno dell'elenco "workspaces" nella radice package.json . Assicurati di utilizzare lo stesso nome che hai utilizzato durante l'esecuzione del comando create-react-app .

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

3. Crea un progetto Express e aggiungilo all'area di lavoro

Ora è il momento di aggiungere un'app di back-end! Usiamo express-generator per creare uno scheletro Express con tutta la configurazione e gli script richiesti.

Assicurati di avere express-generator installato sul tuo computer. Puoi installarlo usando Yarn con il seguente comando:

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

Utilizzando express-generator , creiamo una nuova app Express con il nome "server" all'interno della cartella dei pacchetti .

 $ express --view=pug packages/server

Infine, aggiungi il nuovo pacchetto "server" nell'elenco degli spazi di lavoro all'interno della radice package.json .

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

Nota : questo tutorial è semplificato con solo due pacchetti (server e client). In un progetto, potresti in genere avere tutti i pacchetti di cui hai bisogno e, per convenzione, la comunità open source usa questo modello di denominazione: @your-project-name/package-name . Ad esempio: utilizzo @ferreiro/server sul mio sito web.

4. Installa tutte le dipendenze e saluta yarn.lock

Dopo aver aggiunto la nostra app React, così come il nostro server Express, dobbiamo installare tutte le dipendenze. Gli spazi di lavoro Yarn semplificano questo processo e non è più necessario accedere a ogni singola applicazione e installare manualmente le relative dipendenze. Invece, eseguiamo un comando - yarn install - e Yarn fa la magia per installare tutte le dipendenze per ogni pacchetto, ottimizzarle e memorizzarle nella cache.

Esegui il seguente comando:

 $ yarn install

Questo comando genera un file yarn.lock (simile a questo esempio). Contiene tutte le dipendenze per il tuo progetto, nonché i numeri di versione per ciascuna dipendenza. Yarn genera questo file automaticamente e non dovresti modificarlo.

5. Utilizzo di un carattere jolly (*) per importare tutti i tuoi pacchetti

Finora, per ogni nuovo pacchetto che abbiamo aggiunto, siamo stati costretti ad aggiornare anche il root package.json per includere il nuovo pacchetto negli spazi di workspaces:[] list.

Possiamo evitare questo passaggio manuale usando un carattere jolly (*) che dice a Yarn di includere tutti i pacchetti all'interno della cartella dei pacchetti .

All'interno del root package.json , aggiorna il contenuto del file con la seguente riga: "workspaces": ["packages/*"]

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

6. Aggiungi uno script per eseguire entrambi i pacchetti

Ultimo passo! Abbiamo bisogno di un modo per eseguire entrambi i pacchetti, il client React e il client Express, contemporaneamente. Per questo esempio useremo concurrently . Questo pacchetto ci consente di eseguire più comandi in parallelo.

Aggiungi concurrently alla radice package.json :

 $ yarn add -W concurrently

Aggiungi tre nuovi script all'interno dell'area di lavoro root package.json . Due script inizializzano i client React ed Express in modo indipendente; l'altro utilizza concurrently per eseguire entrambi gli script in parallelo. Vedere questo codice per riferimento.

 { "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\" } }

Nota : non avremo bisogno di scrivere i nostri script di start nei pacchetti "server" e "client" perché gli strumenti che abbiamo usato per generare quei pacchetti ( create-react-app e express-generator ) aggiungono già quegli script per noi. Allora siamo a posto!

Infine, assicurati di aggiornare lo script di avvio Express per eseguire il server Express sulla porta 4000. In caso contrario, il client e il server proveranno a utilizzare la stessa porta (3000).

Vai su packages/server/bin/www e cambia la porta predefinita nella riga 15.

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

Ora siamo pronti per eseguire i nostri pacchetti!

 $ yarn start

Dove andare da qui

Ricapitoliamo quello che abbiamo trattato. Innanzitutto, abbiamo appreso degli spazi di lavoro Yarn e perché è un ottimo strumento per creare un progetto monorepo. Quindi, abbiamo creato il nostro primo progetto JavaScript monorepo utilizzando Yarn e abbiamo diviso la logica della nostra app in più pacchetti: client e server. Inoltre, abbiamo creato i nostri primi script npm di base e aggiunto le dipendenze richieste per ciascuna app.

Da questo punto, ti suggerisco di esaminare in dettaglio i progetti open source per vedere come utilizzano le aree di lavoro Yarn per suddividere la logica del progetto in molti pacchetti. La reazione è buona.

Inoltre, se vuoi vedere un sito Web di produzione che utilizza questo approccio per separare le app back-end e front-end in pacchetti indipendenti, puoi controllare l'origine del mio sito Web, che include anche un amministratore del blog. Quando ho migrato la codebase per utilizzare le aree di lavoro Yarn, ho creato una richiesta pull con Kyle Wetch.

Inoltre, ho configurato l'infrastruttura per un progetto di hackathon che utilizza gli spazi di lavoro React, webpack, Node.js e Yarn e puoi controllare il codice sorgente qui.

Infine, sarebbe davvero interessante per te imparare a pubblicare i tuoi pacchetti indipendenti per familiarizzare con il ciclo di vita dello sviluppo. Ci sono un paio di tutorial interessanti da controllare: yarn publish o npm publish.

Per qualsiasi commento o domanda, non esitate a contattarmi su Twitter. Inoltre, nei prossimi mesi, pubblicherò più contenuti su questo nel mio blog, così puoi iscriverti anche lì. Buona codifica!