javascript - Hvordan bruke én pakkebehandling for backend og frontend? (Yarn/NPM)

Tidligere brukte jeg NPM for serverside-ting og Bower for frontend. NPM ville installere til node_modules/-katalogen, og jeg hadde en .bowerrc for å installere de pakkene til public/lib.

Nå har jeg begynt å bruke Yarn i stedet for NPM; og siden de stort sett er 1:1 kompatible har overgangen gått glatt. Men nå lurer jeg på om jeg kan kvitte meg med Bower og bare bruke Yarn for alt. Men jeg ser ingen måte (hverken i NPM eller Yarn) å installere vanlige pakker til node_modules, men samtidig ha en slags separat mulighet til å legge noen pakker i public/... Noe lignende --dev-alternativet, men i stedet ville det vært yarn add jquery --public. Finnes det noe slikt?

En mulighet, selvfølgelig, ville være å installere alle pakkene til public/-mappen, men jeg tror dette er en dårlig praksis (rett meg hvis jeg tar feil).

Et annet alternativ kan være å ha en egen package.json i public/-mappen og kjøre separate Yarn-kommandoer der for front-end-pakker, men det er bare litt mindre praktisk, tror jeg; mer feilutsatt.

Svar #1

Normen er stort sett noe sånt som:

  1. Installer pakker via yarn

  2. Bruk en oppgavekjører som gulp, eller modulinnlaster og bundler som webpack for å lage de pakkene du trenger.

    • Dette avhenger alt av stakken din, det finnes åpenbart andre, for eksempel har jeg tidligere brukt .NETs native bundling, som du kan oppnå det samme som med gulp/webpack... igjen, dette er opp til deg å bestemme.

Hovedpoenget er å installere alle modulene på ett sentralt sted (ved å bruke en pakkebehandler), og deretter la en loader eller annen prosess hente og flytte de nødvendige ressursene til stedet du trenger å bruke dem.

Jeg vil foreslå å ta en titt på et kickstart-prosjekt (som gjelder stakken du bruker), f.eks.: Jeg har brukt Fountainjs tidligere med suksess, eller se på Yeoman hvis Fountain ikke faller i smak (forresten, Fountain er bygget på toppen av Yeoman)

I pseudo-kommandoer:

1. yarn install     /// installs all assets
2. gulp build       /// cleans out current public folder, bundles & copies new
3. gulp serve       /// runs your app