typescript - Hvordan dele komponenter mellom VueJS-prosjekter i en Monorepo

I ett enkelt depot har jeg to VueJS-spenningssiderapplikasjoner som bør dele noen komponenter, en plugin og annen felles kode. Hvis det gjøres endringer i den felles koden, bør disse umiddelbart være synlige i begge appene.

Mitt spørsmål/spørsmålene: Hvordan kan jeg løse dette? Finnes det en kanonisk måte å gjøre dette på?

Problemene

Min enkle tilnærming var å kopiere koden inn i den felles mappen og importere den med ../../common/my_component. Men dette bryter både relative imports og typing.

Å konvertere delt innhold til npm-moduler bryter den automatiske oppdateringen ved endring, gjør det ikke?

Mer kontekst:

Jeg skriver appene i TypeScript. npm link er ikke et alternativ siden det må kjøre

Akkurat nå ser strukturen slik ut:

/ Main_Project
|-App1
| |- src
| |- ...
|-App2
| |- src
| |- ...
|-Common
| |- components
| |- plugins
| |- shared_code

Svar #1

Løsningen for meg var å kopiere filer fra delt prosjekt til app-prosjektene.

App1/package.json:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "shared": "copyfiles -u 4 -E ../Common/src/shared/**/*.* ./src/shared/"
},
"devDependencies": {
    ....
    "copyfiles": "^2.4.1"
}

Jeg kjører kommandoen npm run shared for å oppdatere delte prosjekterfiler etter at de ble endret i Common-prosjektet. Det er ikke den beste løsningen, men den er enkel, fungerer og krever ikke mye innsats under utviklingen.

Relaterte artikler