typescript - Problem med att använda yarn link för att använda ett lokalt npm-paket som har peerDependencies

Jag stöter på följande problem när jag försöker utveckla ett React-komponentbibliotek med styled-components.

För syftet med detta exempel, låt oss anta att vi har två repos, app och core och att core kommer att användas av app.

För närvarande är core skrivet i TypeScript och byggt med tsc.

För att snabbt iterera försökte jag använda yarn link för att länka core till app.

Det här fungerar bra för att få app att hitta core... problemet jag står inför är när den kompilerade TypeScript-koden från core försöker kräva ett paket, säg styled-components, den försöker hitta detta paket i node_modules för core (inte för app). Eftersom jag har styled-components både som en peerDependency och devDependency kan den hitta det i core's node_modules, men det är inte det jag vill ska hända. Jag skulle vilja att det använder styled-components från app.

Ett alternativ till yarn link som jag har provat är att lägga till beroendet av core till app via file:/path. Detta verkar fungera som förväntat, men introducerar nya problem. Hur kan jag ha en sökväg på min utvecklingsmaskin som finns i package.json endast för lokal utveckling (utan att ständigt behöva byta fram och tillbaka)? Dessutom verkar det som att alla uppdateringar som görs i core kräver att paketet tas bort från app och att yarns cache rensas innan det kan läggas till igen.

Finns det något enklare sätt att få detta scenario att fungera? Jag har just börjat titta på Rollup eller Webpack som en lösning, men är inte säker på om det är rätt riktning.

Svar #1

det är inte en lösning för yarn link.

men en lösning för alla som har problem med att hantera lokala repos med yarn och npm

använd helt enkelt yalc för att hantera dina lokala paket istället för yarn link eller yarn add link:...

Svar #2

Vi kommer att behöva styled-component-biblioteket i devDependencies i kärnrepot, eftersom det krävs för att utveckla återanvändbara komponenter i kärnrepot.

Samtidigt kommer vi att behöva tala om för app-förvaret att ladda peerDependencies för kärn-förvaret från node_modules i app-förvaret.

Vi kan använda webpack för det, till exempel om vi har använt react-scripts för att generera app-repot, kan vi köra yarn eject och hitta webpack.config.js i config-mappen och kan ändra resolve.alias-sektionen.

app/config/webpack.config.js

{
  ...
  resolve: {
    ...
    alias: {
      ...
      core: path.resolve("./node_modules/core") // path must be imported above.
    }  
  }
}

För mer information: https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link

Relaterade artiklar