Monorepo med flera '@/''-sökvägsalias - fungerar i TypeScript men inte i Webpack-kompilatorn

Jag tror inte att detta är möjligt, men det är värt att fråga eftersom jag inte är någon webpack-expert!

Vi har ett monorepo med många olika arbetsområdespaket, som använder TypeScript, byggda med Webpack.

Varje arbetsyta har sin egen tsconfig.json och sin egen webpack.config.js för att bygga det paketet.

Sökvägsalias deklareras för var och en som @package-a, @package-b osv.

Vissa paket har importerats från deras eget fristående repo och deklarerar @ som ett alias för sig själva.

Detta betyder att vi har flera @-alias i olika paket.

ts-konfiguration

"paths": {
      "@/*": ["./src/*"],
      "@package-a/*": ["./src/*"],
      "@package-b/*": ["../package-b/src/*"],
      "@package-c/*": ["../package-c/src/*"]
}

så i koden kan du importera saker som

import { Thing } from '@/data/models/Thing';
import { stuff, in, other, package } from '@package-c/otherThings';

Detta fungerar dock eftersom varje har en lokal tsconfig.js-fil som verkar fungera på paketnivå.

Problemet uppstår vid byggtid. När vi har beroenden mellan paket - och båda filerna använder sin lokala alias @ - vet inte kompilatorn vilken som ska användas.

Webpack har sina egna alias för byggnaden

resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src/'),
      "@package-a/*": path.resolve(__dirname, 'src/'),
      "@package-b": path.resolve(__dirname, '../package-b/src/'),
      "@package-c": path.resolve(__dirname, '../package-c/src/')
    },
  }

Men uppenbarligen används bara den ena webpack-konfigurationen för det paketet vid byggtid.

Finns det något sätt att undvika detta - eller behöver vi helt enkelt byta namn på alla @/*-referenser till deras eget paketnamn?

Svar #1

Du har byggt ett projekt med flera delprojekt. Det finns många verktyg för att hantera dessa projekt: "Yarn Workspaces", "Npm Workspaces" och Lerna

Lerna är ett verktyg för att hantera JavaScript-projekt med flera paket. Lerna hanterar monorepos, som kan innehålla projekt med flera paket inom sig.

Jag har arbetat med Lerna tidigare, du kan skapa ett projekt med

 lerna init

detta kommer att skapa en "packages"-katalog och en lerna.json-fil. du lägger till dina webpack-projekt, "package1, package2" i packages-katalogen. om du vill länka paket:

// setting package1 as package2 dependencies 
lerna add package1 --scope=package2

du kan kolla beroenden för package2 i dess package.json. Om du använder Lerna måste användaren ha Lerna CLI-verktyget installerat på sin dator för att starta projektet

Relaterade artiklar