Frontend Academy · Lektion

npm og package.json: dependencies scripts

Initialisér et projekt med npm init, tilføj runtime- og udviklingsafhængigheder, skriv genanvendelige npm-scripts, og forstå semver.

Lektion 2 af 413 trin

npm og package.json: dependencies scripts er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad er npm?

npm (Node Package Manager) administrerer projektets afhængigheder og scripts. Det læser package.json for at vide, hvad der skal installeres, og skriver package-lock.json for at registrere de præcise versioner. Over to millioner pakker er udgivet i npm-registeret.

Initialisering af et projekt

npm init -y opretter en package.json med standardværdier. Flaget -y accepterer alle standardværdier uden spørgsmål.

mkdir my-project && cd my-project
npm init -y
# Creates package.json

Filen package.json

Vigtige felter: name, version, description, main (indgangspunkt), scripts, dependencies, devDependencies.

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Installation af pakker

npm install package føjer en pakke til afhængighederne. npm install -D package føjer en pakke til udviklingsafhængighederne (ikke nødvendig i produktion). npm install uden argumenter installerer alt i package.json.

npm install react react-dom      # production dep
npm install -D vite jest eslint  # dev deps only
npm install                      # install all from package.json

Semantisk versionsstyring

npm bruger semver: major.minor.patch. Præfikset ^ tillader kompatible opdateringer (samme major-version). Præfikset ~ tillader kun patch-opdateringer. Præcise versioner har intet præfiks.

"react": "^18.3.0"  // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3"     // exactly 1.2.3

npm-kommandoer

Definér kommandoer i feltet scripts. Kør dem med npm run scriptname. Indbyggede kommandoer (test, start) køres direkte med npm test eller npm start.

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "jest --coverage",
  "lint": "eslint src",
  "typecheck": "tsc --noEmit"
}

npm run kontra npx

npm run kører et script fra package.json. npx kører en pakke fra node_modules eller downloader og kører den midlertidigt — nyttigt til engangskommandoer som npx create-vite@latest.

package-lock.json

package-lock.json registrerer den præcise version af hver installeret pakke (og deres transitive afhængigheder). Gem filen i versionsstyringen for at sikre, at alle udviklere og CI bruger identiske versioner. Redigér den aldrig manuelt.

node_modules og .gitignore

Gem aldrig node_modules i versionsstyringen — mappen kan fylde hundredvis af MB. Føj den altid til .gitignore. Alle kan gendanne den med npm install.

# .gitignore
node_modules/

Opdatering og fjernelse af pakker

npm update opdaterer pakker inden for deres semver-interval. npm outdated viser, hvad der kan opdateres. npm uninstall package fjerner en pakke.

npm outdated                # show outdated packages
npm update react             # update to latest compatible
npm uninstall lodash         # remove package

npm kontra yarn kontra pnpm

Alternativer til npm: yarn (hurtigere, arbejdsområder, Plug'n'Play) og pnpm (diskbesparende symlink-lager, strenge afhængigheder, hurtigst til monorepoer). De centrale kommandoer ligner hinanden i alle tre.

# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev

Hurtigt tjek

Hvad gør flaget -D, når du kører npm install -D jest?

Besvar den i den interaktive lektion

Opsummering: npm og package.json

npm init opretter package.json. npm install tilføjer afhængigheder. -D bruges til devDependencies. ^ i semver betyder kompatible opdateringer. Scripts kører kommandoer med npm run. package-lock.json registrerer de nøjagtige versioner — commit den. node_modules skal være i .gitignore. npx kører engangskommandoer fra pakker.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “npm og package.json: dependencies scripts” gratis?

Ja — hele teksten til “npm og package.json: dependencies scripts” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “npm og package.json: dependencies scripts”?

Initialisér et projekt med npm init, tilføj runtime- og udviklingsafhængigheder, skriv genanvendelige npm-scripts, og forstå semver. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “npm og package.json: dependencies scripts”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

ES-moduler: import export og dynamic import
npm og package.json: dependencies scripts
Vite: dev-server og build
Bundling-koncepter: tree shaking og code splitting

← Tilbage til Frontend Academy