TypeScript Academy · Oppitunti

pnpm Workspaces TypeScriptin kanssa

Määrittäkää monorepo pnpm:n ja jaetun tsconfigin avulla

Oppitunti 2/413 vaihetta

pnpm Workspaces TypeScriptin kanssa on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä pnpm workspaces ovat

pnpm workspacesin avulla voitte hallita useita paketteja yhdessä repositoriossa jaetulla node_modules-rakenteella. Tämä vähentää levytilan käyttöä ja mahdollistaa pakettien väliset tuonnit.

# pnpm-workspace.yaml
packages:
  - "packages/*"
  - "apps/*"

Workspacen rakenteen luominen

Tyypillisessä pnpm-monorepossa packages/ sisältää jaetut kirjastot ja apps/ julkaistavat sovellukset.

monorepo/
├── pnpm-workspace.yaml
├── package.json          # root
├── packages/
│   ├── core/             # shared logic
│   └── ui/               # shared components
└── apps/
    └── web/              # Next.js app

Juurihakemiston tsconfig.json

Juurihakemiston tsconfig määrittää perusasetukset ja viittaa kaikkiin workspacen paketteihin.

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler"
  },
  "references": [
    { "path": "packages/core" },
    { "path": "packages/ui" },
    { "path": "apps/web" }
  ]
}

Pakettikohtainen tsconfig

Jokainen paketti laajentaa juurihakemiston asetuksia ja määrittää omat asetuksensa composite ja outDir.

// packages/core/tsconfig.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Pakettien välisten riippuvuuksien asentaminen

Linkittäkää monorepon sisäiset paketit toisiinsa käyttämällä komentoa pnpm add yhdessä workspacen protokollan kanssa.

# Add @myapp/core to apps/web
pnpm add @myapp/core --workspace --filter apps/web

# package.json entry:
# "@myapp/core": "workspace:*"

TypeScriptin polkujen ratkaisu

Lisätkää juuren tsconfigiin paths-aliakset, jotta TypeScript ratkaisee workspace-paketit niiden lähdekoodiin kehityksen aikana.

{
  "compilerOptions": {
    "paths": {
      "@myapp/core": ["./packages/core/src/index.ts"],
      "@myapp/ui": ["./packages/ui/src/index.ts"]
    }
  }
}

Kaikkien pakettien koonti

Kootkaa kaikki komposiittipaketit riippuvuusjärjestyksessä suorittamalla komento tsc --build juuresta.

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

Komentosarjojen suorittaminen paketeissa

pnpm -r (rekursiivinen suoritus) tai --filter suorittaa komentosarjat kaikissa paketeissa, jotka vastaavat määritettyä suodatinta.

# Run tests in all packages
pnpm -r test

# Run only in packages/core
pnpm --filter @myapp/core test

Jaettu ESLint- ja Prettier-määritys

Säilyttäkää linttausmääritykset jaetussa paketissa ja laajentakaa niitä kussakin paketissa, jotta koodityyli pysyy yhtenäisenä koko monorepossa.

// packages/eslint-config/index.js
module.exports = { extends: ["airbnb-typescript"], ... };

Turborepo-integraatio

Lisätkää Turborepo tehtävien build/test/lint välimuistittamista ja rinnakkaistamista varten. Käyttäkää riippuvuuksien järjestämiseen pnpm-workspacen graafia.

npx create-turbo@latest
# or add to existing monorepo:
pnpm add turbo -w

Kertaus: pnpm workspaces ja TypeScript

pnpm workspaces ja TypeScriptin projektiviittaukset muodostavat tehokkaan monoreporatkaisun: jaettu node_modules, pakettien väliset tuonnit protokollalla workspace:* ja nopeat koonnit komennolla tsc --build.

Pikatarkistus

Missä tiedostossa määritetään, mitkä hakemistot ovat pnpm-workspacen paketteja?

Vastaa interaktiivisessa oppitunnissa

Mitä opitte

pnpm workspaces ja TypeScriptin projektiviittaukset tarjoavat tehokkaan monorepon, jossa on jaettu node_modules, pakettien välinen linkitys workspacen protokollalla ja inkrementaaliset koonnit. Lisätkää Turborepo välimuistittamista ja rinnakkaistamista varten.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”pnpm Workspaces TypeScriptin kanssa” ilmainen?

Kyllä – oppitunnin ”pnpm Workspaces TypeScriptin kanssa” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”pnpm Workspaces TypeScriptin kanssa”?

Määrittäkää monorepo pnpm:n ja jaetun tsconfigin avulla Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”pnpm Workspaces TypeScriptin kanssa”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

TypeScript-projektiviitteet selitettyinä
pnpm Workspaces TypeScriptin kanssa
Jaettujen tyyppien pakettistrategia
Inkrementaaliset buildit ja välimuisti monorepoissa

← Takaisin: TypeScript Academy