Yarn Workspaces: uporządkuj bazę kodu swojego projektu jak profesjonalista

Za każdym razem, gdy zaczynam pracę nad nowym projektem, zadaję sobie pytanie: „Czy powinienem używać oddzielnych repozytoriów git dla mojego serwera zaplecza i klienta (klientów) frontonu? Jaki jest najlepszy sposób na uporządkowanie bazy kodu?”

To samo pytanie zadałem po kilku miesiącach pracy nad moją osobistą stroną internetową. Pierwotnie miałem cały kod w tym samym repozytorium: back-end używał Node.js, a frontend używał ES6 z Pug. Przyjąłem tę organizację dla wygody, ponieważ posiadanie obu projektów w tym samym repozytorium ułatwiało wyszukiwanie funkcji i klas oraz ułatwiało refaktory. Znalazłem jednak pewne wady:

• Brak niezależnych wdrożeń.
  Obie aplikacje używały tego samego package.json i nie było wyraźnego oddzielenia w obu projektach.
• Niejasne granice.
  Ponieważ polegam na globalnym package.json , nie miałem mechanizmu do ustawiania konkretnych wersji dla backendu i frontendu.
• Współużytkowane narzędzia i kod bez wersjonowania.

Po kilku badaniach odkryłem, że obszary robocze Yarn były świetnym narzędziem do rozwiązywania tych wad i było pomocnym narzędziem do tworzenia projektu monorepo (więcej później!).

W tym artykule udostępniam wprowadzenie do obszarów roboczych Yarn. Wspólnie przejdziemy przez samouczek, jak stworzyć z nim swój pierwszy projekt, a zakończymy podsumowaniem i kolejnymi krokami.

Co to są obszary robocze przędzy?

Yarn to menedżer pakietów stworzony przez ludzi z Facebooka i ma świetną funkcję o nazwie obszary robocze Yarn. Obszary robocze Yarn umożliwiają organizowanie bazy kodu projektu za pomocą monolitycznego repozytorium (monorepo). Chodzi o to, aby jedno repozytorium zawierało wiele pakietów. Pakiety są izolowane i mogą funkcjonować niezależnie od większego projektu.

Jako alternatywę moglibyśmy umieścić wszystkie te pakiety w osobnych repozytoriach. Niestety, to podejście wpływa na udostępnianie, wydajność i doświadczenie programistów podczas opracowywania pakietów i zależnych od nich projektów. Ponadto, gdy pracujemy w jednym repozytorium, możemy działać szybciej i budować bardziej szczegółowe narzędzia, aby usprawnić procesy dla całego cyklu życia deweloperskiego.

Projekty Monorepo zostały szeroko zaakceptowane przez duże firmy, takie jak Google czy Facebook, i udowodniły, że można je skalować.

“

React jest dobrym przykładem projektu open-source, który jest monorepo. Ponadto React wykorzystuje obszary robocze Yarn, aby osiągnąć ten cel. W następnym rozdziale dowiemy się, jak stworzyć nasz pierwszy projekt monorepo z użyciem Yarn.

Tworzenie projektu Monorepo za pomocą React And Express przy użyciu obszarów roboczych Yarn w sześciu krokach

Do tej pory dowiedzieliśmy się, czym jest Yarn, czym jest monorepo i dlaczego Yarn jest świetnym narzędziem do tworzenia monorepo. Teraz nauczmy się od podstaw, jak skonfigurować nowy projekt przy użyciu obszarów roboczych Yarn. Aby kontynuować, potrzebujesz środowiska roboczego z aktualną instalacją npm. Pobierz kod źródłowy.

Warunki wstępne

Aby w pełni ukończyć ten samouczek, musisz mieć zainstalowaną przędzę na swoim komputerze. Jeśli nie zainstalowałeś wcześniej Yarn, postępuj zgodnie z tymi instrukcjami.

Oto kroki, które będziemy wykonywać w tym samouczku:

1. Stwórz swój projekt i zrootuj przestrzeń roboczą
2. Utwórz projekt React i dodaj go do listy obszarów roboczych
3. Utwórz projekt ekspresowy i dodaj go do obszaru roboczego
4. Zainstaluj wszystkie zależności i przywitaj się z yarn.lock
5. Używanie symbolu wieloznacznego (*) do importowania wszystkich paczek
6. Dodaj skrypt, aby uruchomić oba pakiety

1. Stwórz swój projekt i zrootuj przestrzeń roboczą

Na lokalnym terminalu komputera utwórz nowy folder o nazwie example-monorepo :

 $ mkdir example-monorepo

Wewnątrz folderu utwórz nowy plik package.json z naszym głównym obszarem roboczym.

 $ cd example-monorepo $ touch package.json

Ten pakiet powinien być prywatny, aby zapobiec przypadkowemu opublikowaniu głównego obszaru roboczego. Dodaj następujący kod do nowego pliku package.json , aby uczynić pakiet prywatnym:

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

2. Utwórz projekt React i dodaj go do listy obszarów roboczych

W tym kroku utworzymy nowy projekt React i dodamy go do listy pakietów w głównym obszarze roboczym.

Najpierw utwórzmy folder o nazwie pakiety , w którym dodamy różne projekty, które stworzymy w samouczku:

 $ mkdir packages

Facebook ma polecenie tworzenia nowych projektów React: create-react-app . Wykorzystamy go do stworzenia nowej aplikacji React ze wszystkimi wymaganymi konfiguracjami i skryptami. Tworzymy ten nowy projekt o nazwie „klient” w folderze pakietów , który utworzyliśmy w kroku 1.

 $ yarn create react-app packages/client

Po utworzeniu nowego projektu React musimy powiedzieć Yarnowi, aby traktował ten projekt jako obszar roboczy. Aby to zrobić, wystarczy dodać „klient” (nazwę, której używaliśmy wcześniej) na liście „obszarów roboczych” w głównym pliku package.json . Upewnij się, że używasz tej samej nazwy, której użyłeś podczas uruchamiania polecenia create-react-app .

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

3. Utwórz projekt ekspresowy i dodaj go do obszaru roboczego

Teraz nadszedł czas na dodanie aplikacji zaplecza! Używamy express-generator do stworzenia szkieletu Express z całą wymaganą konfiguracją i skryptami.

Upewnij się, że masz zainstalowany express-generator na swoim komputerze. Możesz go zainstalować za pomocą Yarn za pomocą następującego polecenia:

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

Korzystając express-generator , tworzymy nową aplikację Express o nazwie „serwer” w folderze pakietów .

 $ express --view=pug packages/server

Na koniec dodaj nowy pakiet „serwer” do listy obszarów roboczych w głównym pliku package.json .

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

Uwaga : Ten samouczek jest uproszczony i zawiera tylko dwa pakiety (serwer i klient). W projekcie zazwyczaj możesz mieć tyle pakietów, ile potrzebujesz, a zgodnie z konwencją społeczność open source używa tego wzorca nazewnictwa: @your-project-name/package-name . Na przykład: na mojej stronie używam @ferreiro/server .

4. Zainstaluj wszystkie zależności i przywitaj się z yarn.lock

Po dodaniu naszej aplikacji React, a także naszego serwera Express, musimy zainstalować wszystkie zależności. Obszary robocze Yarn upraszcza ten proces i nie musimy już przechodzić do każdej aplikacji i ręcznie instalować ich zależności. Zamiast tego wykonujemy jedno polecenie — yarn install — a Yarn robi magię, aby zainstalować wszystkie zależności dla każdego pakietu, a także je zoptymalizować i buforować.

Uruchom następujące polecenie:

 $ yarn install

To polecenie generuje plik przędzy.lock (podobny do tego przykładu). Zawiera wszystkie zależności dla twojego projektu, a także numery wersji dla każdej zależności. Yarn generuje ten plik automatycznie i nie powinieneś go modyfikować.

5. Używanie symbolu wieloznacznego (*) do importowania wszystkich paczek

Do tej pory, dla każdego nowego pakietu, który dodaliśmy, byliśmy zmuszeni również aktualizować plik root.json , aby dołączyć nowy pakiet do listy workspaces:[] .

Możemy uniknąć tego ręcznego kroku, używając symbolu wieloznacznego (*), który nakazuje Yarnowi uwzględnienie wszystkich pakietów w folderze pakietów .

Wewnątrz głównego pakietu.json zaktualizuj zawartość pliku za pomocą następującego wiersza: "workspaces": ["packages/*"]

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

6. Dodaj skrypt, aby uruchomić oba pakiety

Ostatni krok! Musimy mieć sposób na jednoczesne uruchomienie obu pakietów — klienta React i klienta Express. W tym przykładzie użyjemy concurrently . Ten pakiet pozwala nam na równoległe uruchamianie wielu poleceń.

Dodaj concurrently do głównego pakietu.json :

 $ yarn add -W concurrently

Dodaj trzy nowe skrypty w głównym obszarze roboczym package.json . Dwa skrypty niezależnie inicjują klientów React i Express; drugi używa concurrently do równoległego uruchamiania obu skryptów. Zobacz ten kod w celach informacyjnych.

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

Uwaga : nie będziemy musieli pisać naszych skryptów start w pakietach „serwer” i „klient”, ponieważ narzędzia, których użyliśmy do wygenerowania tych pakietów ( create-react-app i express-generator ) już dodają te skrypty dla nas. Więc możemy iść!

Na koniec upewnij się, że zaktualizowałeś skrypt uruchamiania Express tak, aby serwer Express był uruchamiany na porcie 4000. W przeciwnym razie klient i serwer będą próbowały używać tego samego portu (3000).

Przejdź do packages/server/bin/www i zmień domyślny port w linii 15.

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

Teraz jesteśmy gotowi do uruchomienia naszych pakietów!

 $ yarn start

Gdzie iść stąd?

Podsumujmy, co omówiliśmy. Najpierw dowiedzieliśmy się o obszarach roboczych Yarn i dlaczego jest to świetne narzędzie do tworzenia projektu monorepo. Następnie stworzyliśmy nasz pierwszy projekt monorepo JavaScript przy użyciu Yarn i podzieliliśmy logikę naszej aplikacji na wiele pakietów: klienta i serwera. Ponadto stworzyliśmy nasze pierwsze podstawowe skrypty npm i dodaliśmy wymagane zależności dla każdej aplikacji.

Od tego momentu sugeruję szczegółowe zapoznanie się z projektami typu open source, aby zobaczyć, w jaki sposób używają obszarów roboczych Yarn do dzielenia logiki projektu na wiele pakietów. React jest dobry.

Ponadto, jeśli chcesz zobaczyć witrynę produkcyjną wykorzystującą takie podejście do rozdzielenia aplikacji back-end i front-end w niezależne pakiety, możesz sprawdzić źródło mojej witryny, które obejmuje również administratora bloga. Kiedy przeprowadziłem migrację bazy kodu do obszarów roboczych Yarn, utworzyłem żądanie ściągnięcia za pomocą Kyle'a Wetcha.

Ponadto skonfigurowałem infrastrukturę dla projektu hackathon, który wykorzystuje obszary robocze React, webpack, Node.js i Yarn, a kod źródłowy możesz sprawdzić tutaj.

Wreszcie, byłoby naprawdę interesujące dowiedzieć się, jak publikować swoje niezależne pakiety, aby zapoznać się z cyklem życia deweloperów. Istnieje kilka samouczków, które warto sprawdzić: publikowanie przędzy lub publikowanie npm.

W przypadku jakichkolwiek komentarzy lub pytań nie wahaj się skontaktować ze mną na Twitterze. Ponadto w kolejnych miesiącach opublikuję więcej treści na ten temat na moim blogu, więc również tam możesz subskrybować. Udanego kodowania!