React Academy · Oppitunti

Jaetut kirjastot ja sisäiset paketit

Luokaa jaettuja UI- ja utiliteettikirjastoja ja tuokaa niitä sovelluksiin TypeScriptin polkualiasien avulla.

Oppitunti 2/412 vaihetta

Jaetut kirjastot ja sisäiset paketit on ilmainen React 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 React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Miksi jaetut kirjastot?

Sen sijaan että monistaisitte komponentteja, hookeja ja apuohjelmia useisiin sovelluksiin, erottakaa ne jaetuiksi kirjastoprojekteiksi, joita mikä tahansa monorepon sovellus voi käyttää.

Kirjaston luominen

Käyttäkää Nx-generaattoreita tyypitettyjen ja käännettävien kirjastoprojektien luomiseen.

# UI component library:
npx nx generate @nx/react:library ui --directory=libs/ui --importPath=@myorg/ui

# Utility library:
npx nx generate @nx/js:library utils --directory=libs/utils --importPath=@myorg/utils

# Data access library (hooks, API calls):
npx nx generate @nx/react:library data-access --importPath=@myorg/data-access

Kirjaston julkinen API

Viekää kaikki yhdestä index.ts-tiedostosta (julkinen API). Käyttäjien tulisi tuoda sisältöä vain muodosta @myorg/ui, ei syvistä sisäisistä poluista.

// libs/ui/src/index.ts
export { Button } from './lib/Button';
export { Card } from './lib/Card';
export { Input } from './lib/Input';
export type { ButtonProps } from './lib/Button';

// Consumer in apps/web:
import { Button, Card } from '@myorg/ui';
// NOT: import { Button } from '@myorg/ui/src/lib/Button'; // internal path

Kirjastotyypit: publishable ja buildable

Buildable-kirjastot käännetään inkrementaalisesti, mikä nopeuttaa monorepon koontiversioiden luomista. Publishable-kirjastot tuottavat lisäksi npm-yhteensopivan paketin ulkoista käyttöä varten.

# Buildable (monorepo internal use only):
npx nx generate @nx/react:library ui --buildable

# Publishable (for npm too):
npx nx generate @nx/react:library ui --publishable --importPath=@myorg/ui

Moduulirajojen valvonta

Käyttäkää @nx/enforce-module-boundaries-ESLint-sääntöä kehäriippuvuuksien estämiseen ja rajoittamaan sitä, mitkä projektit voivat tuoda toisistensa sisältöä.

// nx.json or .eslintrc
"depConstraints": [
  // Apps can only import from libs:
  { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] },
  // Feature libs can't import other feature libs (via shared libs only):
  { "sourceTag": "type:feature", "notDependOnLibsWithTags": ["type:feature"] }
]

Storybook jaetuille kirjastoille

Suorittakaa Storybook käyttöliittymäkirjastoa vasten dokumentoidaksenne komponentit erillään mistä tahansa sovelluksesta.

# Generate Storybook config for the ui lib:
npx nx generate @nx/storybook:configuration ui

# Run Storybook:
npx nx storybook ui

Kirjastojen testaaminen

Jokaisella kirjastolla on oma testikohteensa. Suorittakaa kirjaston testit ja kaikkien sen muuttumisesta vaikutettujen sovellusten testit.

# Test specific library:
npx nx test ui

# Test all affected by a change:
npx nx affected --target=test

Versioiden hallinta monorepoissa

Monorepossa kaikki paketit käyttävät samaa package.json-tiedostoa ja versiota. Käyttäkää julkaistaville kirjastoille esimerkiksi työkaluja @jscutlery/semver tai Changesets itsenäisen versioinnin hallintaan.

Olemassa olevan koodin siirtäminen kirjastoihin

Siirtäkää jaettu koodi vähitellen kirjastoon: luokaa kirjasto, siirtäkää tiedostot, päivittäkää tuonnit ja antakaa TypeScriptin polkualiasten hoitaa loput.

# Move a component:
# 1. Copy src/components/Button.tsx → libs/ui/src/lib/Button.tsx
# 2. Export from libs/ui/src/index.ts
# 3. Update imports across apps from relative paths to '@myorg/ui'
# 4. Delete the original file

Dokumentointi Compodocilla tai Storybook Docsilla

Käyttäkää Storybookin autodocs-tagia tai Compodocia API-dokumentaation luomiseen kirjastotiedostojen TypeScript-tyypeistä ja JSDoc-kommenteista.

Pikatarkistus

Mikä tulisi olla ainoa sisääntulopiste, kun käyttäjät tuovat sisältöä jaetusta Nx-kirjastosta?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Luokaa kirjastot komennolla nx generate, viekää kaikki yhdestä index.ts-tiedostosta ja valvokaa moduulirajoja ESLint-säännöillä. Käyttäkää buildable-kirjastoja nopeampiin inkrementaalisiin koonteihin ja publishable-kirjastoja, kun haluatte julkaista paketin npm:ään. Suorittakaa Storybook käyttöliittymäkirjastoja vasten erillistä dokumentointia varten.

Aloita maksutta

Opi React 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: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Jaetut kirjastot ja sisäiset paketit” ilmainen?

Kyllä – oppitunnin ”Jaetut kirjastot ja sisäiset paketit” 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 React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Jaetut kirjastot ja sisäiset paketit”?

Luokaa jaettuja UI- ja utiliteettikirjastoja ja tuokaa niitä sovelluksiin TypeScriptin polkualiasien avulla. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React 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 ”Jaetut kirjastot ja sisäiset paketit”-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ä React Academy-oppitunnilla?

Kyllä. Jokainen React 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

Nx-monorepon luominen React-sovelluksilla
Jaetut kirjastot ja sisäiset paketit
Nx Affected -komennot ja välimuisti
Koodigeneraattorit ja työtilan automatisointi

← Takaisin: React Academy