node.js - Dela TypeScript-kod mellan backend, React och React Native-klienter

Jag har börjat konvertera mitt projekt till TypeScript och under tiden bestämde jag mig för att förbättra kodåteranvändningen mellan Node.js-backend, React-webbklient och React Native-mobilklient.

Här är min projektstruktur:

 ├ commons (code shared between backend and frontend, mostly type definitions and utils
 ├ clients (code shared between web and mobile clients, depends on commons: containers, utils, forms... )
 ├ backend (express server, depends on commons)
 ├ web (create-react-app, not ejected, no SSR needed, depends on clients)
 ├ mobile (react-native client, depends on clients)

Vad jag har försökt hittills:

  • Symlänkar. Kunde inte få dem att fungera med react-native (se metro bundler-issue). Detta kan förmodligen lösas genom att använda haul, men det lägger till extra komplexitet genom att få haul att fungera med typescript. Dessutom verkar haul inte fungera med Mobile Center, som jag använder för att publicera mobilappar.
  • Att använda rootDirs eller paths i tsconfig.json. Typescript-kompilatorn slår inte ihop/buntar utskrifterna, så det betyder att jag behöver stödja 3 olika lösningar för att slå ihop genererad kod. Fungerar inte heller bra med min IDE.

  • Använder WML. Jag försökte två tillvägagångssätt:

    • Länkar commons och clients till paket inuti node_modules för web/mobil/server. För att göra detta måste jag generera deklarationer, vilket är betungande eftersom det kräver att alla imports exponeras (se detta problem). Fungerar inte heller bra med yarn, som tar bort det länkade paketet varje gång det installerar något nytt.

    • Länkar commons och clients till en separat källmapp inne i källmapparna för web, mobil och backend. Detta är vad jag använder i den nuvarande JS-versionen av mitt projekt. Det fungerar, men det har vissa nackdelar:

      • Långa relativa importeringar (kan förmodligen lösas genom att stödja 3 olika lösningar för modulalias)
      • wml bryts ibland i bakgrunden, vilket leder till några förvirrande men ändå lätt upptäckta fel
      • fungerar inte bra med varm omladdning

Jag letar efter en lösning som inte är för komplex (kräver minimal konfiguration på webben/mobilen/backend-sidor) och fungerar bra med Webstorm. Den finns förmodligen inte nu, så jag skulle vilja höra vilka andra lösningar folk här använder för liknande projektuppsättningar.

Svar #1

I en liknande situation som din gjorde jag följande:

  1. commons publiceras som ett separat npm-paket. Du kan göra det privat om det behövs.

  2. clients beror på commons-paketet och publiceras också till npm. Återigen - privat om det behövs.

  3. webb och mobil projekt återanvänder båda npm-paketen som skapats ovan.