frontend-guide

# 2. Organizacja repozytorium

Aby w łatwy sposób móc pracować z różnymi paczkami w kontekście jedngo repozytorium przyjeliśmy strategorie typu monorepo (opens new window) wykorzystując przy tym mechanizm yarn workspaces (opens new window) - tzn, że osobne paczki aplikacji frontendowej oraz częsci UI mogą być zawarte w jednym repozytorium. Dzięki temu rozwiązujemy kilka problemów i głównych założeń:

  1. Aplikacja frontendowa musi wiedzieć o komponentach UI - musi mieć do nich dostęp, najlepiej w formie paczki npm - w klasycznym podejściu kiedy to paczka UI jest osobnym repozytorium praca jest utrudniona, ponieważ należy sklonować osobno projekt UI a następnie go podlinkować w aplikacji frontendowej np. używając yarn link - tak aby nasz moduł UI w aplikacji frontendowej symlinkował na repozytorium ściągnięte lokalnie.

  2. Upgrade paczki UI - w przypadku osobnego repozytorium, przy każdej nowej wersji musielibyśmy najpierw commitować zmiany do repozytorium UI a dopiero później w repozytorium FRONT musielibyśmy wykonać operację yarn upgrade podnoszącą wersję repozytorium UI.

  3. Problem pojawia się nie tylko przy wydawaniu zmian, ale przy zarządzaniu tymi zmianami per różne środowiska np. FRONT dla wersji develop musi mieć osobną gałąź develop dla paczki UI.

  4. Problem z utrzymywaniem różnych wersji modułów npm pomiędzy repozytoriami FRONT oraz UI. Np. w paczce UI wykorzystujemy Vue.js w wersji 2.6 i wartoby było w paczke FRONT utrzymywać tą samą wersję.

W przypadku wykorzystania yarn workspaces sytuacja jest uproszczona, oponieważ paczka UI znajduje się w tym samym repozytorium co aplikacja front, ponadto możemy ją importować jako moduł npm, a wszysztkie paczki pomiędzy workspaceami są współdzielone - więcej o tym poniżej.

# 2.1 Przykład konfiguracji

Tworzymy folder pod nasz projekt:

mkdir project && cd project
1

Inicjalizujemy projekt przez stworzenie pliku package.json

yarn init
1

Wynik operacji

➜  project yarn init
yarn init v1.22.4
question name (project):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private: yes
success Saved package.json
✨  Done in 19.71s.
1
2
3
4
5
6
7
8
9
10
11
12

Teraz stworzymy dwa foldery, które bedą odpowiedzialne za paczki FRONT oraz UI

mkdir project-front && mkdir project-ui
1

Następnie w tych dwóch folderach inicjalizujemy projekty przez stworzenie plików package.json w ten sam sposób jak dla folderu project

Wykonaj komendę w głównym folderze, aby zainstalować (symlinkować) nasze paczki jako node_modules

yarn
1

Wynik powyższych operacji:

├── node_modules
│   ├── project-front -> ../project-front
│   └── project-ui -> ../project-ui
├── package.json
├── project-front
│   └── package.json
├── project-ui
│   └── package.json
└── yarn.lock

5 directories, 4 files
1
2
3
4
5
6
7
8
9
10
11

# 2.2 Symulacja użycia

Możemy zasymulować i użyć plików z paczki UI w paczce FRONT.

  1. Stwórz plik index.js w project-ui:
touch ./project-ui/index.js
1

index.js:

const myComponent = () => {
    console.log('Hello from UI')
}

module.exports = { myComponent }
1
2
3
4
5
  1. Stwórz plik index.js w project-front:
touch ./project-front/index.js
1

index.js:

const { myComponent} = require('project-ui')
myComponent()
1
2

Wykonaj skrypt:

node ./project-front/index.js
Hello from UI
1
2

Aby powyższy kod zadziałał, tzn aby móc importować z paczek, musimy ustawić tak zwane pole main czyli entry point dla naszego modułu. Domyślnie jest to plik index.js

project-ui/package.json:




 




{
  "name": "project-ui",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true
}
1
2
3
4
5
6
7

# 2.3 Praca z monorepo

Należy mieć na uwadzę, że kiedy chcemy zainstalować nową paczkę w sposób do którego przywykliśmy czyli yarn add nazwa-paczki zmienia się - jeżeli robimy to z poziomu głównego folderu - musim pamiętać o worskapce do którego chcemy dodać nową paczkę.

yarn workspace project-ui add vue-svgicon
1
yarn workspace project-ui remove vue-svgicon
1

Należy również zwrócić uwagę na miejsce instalacji paczek - jeżeli wszystkie paczki wykorzystują wspólną wersję modułu to ten moduł znajdzie się w node_modules w głównym folderze repozytorium - w przeciwnym wypadku jeżeli paczka X wykorzystuje moduł webpack@5 a paczka Z webpack@4 to każda z tych paczek będzie miała swój folder node_modules.

# 2.4 Linki

https://classic.yarnpkg.com/en/docs/workspaces (opens new window) Przejście na monorepo bez utraty historii git (opens new window)

← 3. Standardy językowe, narzędzia, konfiguracje →