Współtworzenie

Stos technologiczny i trochę informacji ogólnych

Oto przegląd narzędzi i środowiska wykonawczego tego projektu

Dla całego projektu mamy:

• Node.js >=20. Podstawowe środowisko bibliotek.
• Electron 29. Faktyczne środowisko wykonawcze launchera.
• pnpm. Używany do zarządzania pakietami w monorepo.
• TypeScript. Cały projekt używa TypeScript w jak największym stopniu.

Dla procesu głównego (Electron) mamy:

• esbuild. Używamy esbuild do budowania naszego głównego procesu TypeScript.

Dla strony renderującej, która jest czystym frontendem:

• Vue. Używany do budowania interfejsów użytkownika.
• Vite. Używany jako nasz system budowania.
• Vuetify. Używany jako biblioteka komponentów.
• Vue Composition API. Pomost dla API kompozycyjnego dla Vue 2. Gdy Vuetify zostanie zaktualizowany do Vue 3, Vue zostanie zaktualizowany i to zostanie usunięte.

Struktura projektu

Możesz zobaczyć dla szczegółowego projektu. Powinno obejmować 90% przypadków!

Jak wnieść wkład

Zdecydowanie zalecamy używanie VSCode do otwierania projektu.

Pierwsze kroki

Klonowanie

Sklonuj projekt z flagą submodułu --recurse-submodules.

git clone --recurse-submodules https://github.com/Voxelum/x-minecraft-launcher

Jeśli zapomnisz dodać flagę --recurse-submodules, musisz ręcznie zainicjować i zaktualizować submoduł git.

git submodule init
git submodule update

Instalacja

Zainstaluj projekt używając pnpm:

pnpm install

Rozwiązanie problemu wolnej instalacji zależności (takich jak Electron) w Chinach kontynentalnych

Otwórz git bash i przed pnpm i dodaj registry=https://registry.npm.taobao.org electron_mirror="https://npm.taobao.org/mirrors/electron/". Użyj krajowego lustra npm i Electron dostarczanego przez Alibabę.

Ostatecznie wprowadzone polecenie to:

registry=https://registry.npm.taobao.org electron_mirror="https://npm.taobao.org/mirrors/electron/" pnpm i

Ustawianie zmiennych środowiskowych

Powinieneś ustawić CURSEFORGE_API_KEY tworząc plik .env w xmcl-electron-app. Ten plik .env jest dodany do pliku .gitignore.

UWAGA

NIE UJAWNIAJ SWOJEGO KLUCZA API CURSEFORGE

Uruchamianie Launchera

Następnie możesz uruchomić launcher

Dla VSCode

Przejdź do sekcji Run and Debug, użyj profilu Electron: Main (launch) aby uruchomić electron. (Skrót klawiszowy F5)

Dla innych niż VSCode

Otwórz jeden terminal

# Uruchom serwer dev dla UI
npm run dev:renderer

Otwórz inny terminal

# Uruchom obserwowanie kodu procesu głównego
npm run dev:main

"Gorąca" zmiana kodu

Masz zmianę w kodzie i chcesz zaktualizować zmianę w działającej instancji launchera.

Dla procesu przeglądarki

Vite zapewnia hot reload, powinien aktualizować się automatycznie. Jeśli coś pójdzie nie tak, możesz odświeżyć przeglądarkę za pomocą Ctrl+R.

Dla procesu głównego

Jeśli używasz VSCode do uruchomienia launchera, po zmianie kodu możesz nacisnąć przycisk przeładowania w debuggerze VSCode.

Jeśli nie używasz VSCode do uruchomienia, powinien zamknąć Electron i automatycznie przeładować.

Znalazłeś coś nieprawidłowego w rdzeniu launchera

Rdzeń launchera znajduje się w oddzielnym projekcie napisanym w TypeScript.

Proszę otworzyć problem tam, jeśli zidentyfikujesz jakikolwiek problem z nim związany.

Debugger VSCode

Projekt zawiera konfiguracje debuggera VSCode. Możesz dodać punkt przerwania w linii i debugować. Obecnie metoda debuggera VSCode obsługuje tylko debugowanie w procesie głównym.

(Możesz używać Chrome DevTools dla procesu renderującego w każdym razie)

Mamy teraz dwie opcje:

1. Electron: Main (launch)
2. Electron: Main (attach)

Jeśli użyjesz pierwszej opcji do uruchomienia, automatycznie dołączy debugger do instancji.

Commitowanie kodu

Ten projekt przestrzega conventional commits. Krótko mówiąc, pierwsza linia twojej wiadomości commit powinna wyglądać tak:

typ commita: opis commita

Dostępnych jest kilka typów commitów: feat, fix, refactor, style, docs, chore, test.

Odnosząc się do tego gista:

feat: (nowa funkcja dla użytkownika, nie nowa funkcja dla skryptu budującego)

fix: (poprawka błędu dla użytkownika, nie poprawka dla skryptu budującego)

docs: (zmiany w dokumentacji)

style: (formatowanie, brakujące średniki itp.; brak zmian w kodzie produkcyjnym)

refactor: (refaktoryzacja kodu produkcyjnego, np. zmiana nazwy zmiennej)

test: (dodawanie brakujących testów, refaktoryzacja testów; brak zmian w kodzie produkcyjnym)

chore: (aktualizacja zadań grunt itp.; brak zmian w kodzie produkcyjnym)

Twój commit zostanie odrzucony, jeśli nie będziesz przestrzegać tych zasad.

Jak budować

Obecny launcher wymaga uruchomienia 2 poleceń do zbudowania

Najpierw musisz zbudować kod frontendu:

pnpm build:renderer

Chyba że kod w xmcl-keystone-ui uległ zmianie, nie musisz budować tego ponownie.

Następnie możesz zbudować Electron z dołączonym właśnie zbudowanym frontendem:

pnpm build