Frontend Academy · Lektion

npm och package.json: dependencies scripts

Initiera ett projekt med npm init, lägg till runtime- och utvecklingsberoenden, skriv återanvändbara npm-skript och förstå semver.

Lektion 2 av 413 steg

npm och package.json: dependencies scripts är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad är npm?

npm (Node Package Manager) hanterar projektets beroenden och skript. Det läser package.json för att veta vad som ska installeras och skriver package-lock.json för att registrera exakta versioner. Över två miljoner paket har publicerats i npm-registret.

Initiera ett projekt

npm init -y skapar en package.json med standardvärden. Flaggan -y accepterar alla standardvärden utan frågor.

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

Filen package.json

Viktiga fält är name, version, description, main (ingångspunkt), scripts, dependencies och 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"
  }
}

Installera paket

npm install package lägger till paketet bland beroendena. npm install -D package lägger till paketet bland devDependencies (behövs inte i produktion). npm install utan argument installerar allt 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 versionshantering

npm använder semver: major.minor.patch. Prefixet ^ tillåter kompatibla uppdateringar (samma major-version). Prefixet ~ tillåter endast patch-uppdateringar. Exakta versioner har inget prefix.

"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-skript

Definiera kommandon i fältet scripts. Kör dem med npm run scriptname. Inbyggda skript (test, start) körs direkt 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 jämfört med npx

npm run kör ett skript från package.json. npx kör ett paket från node_modules eller hämtar och kör det tillfälligt – användbart för engångskommandon som npx create-vite@latest.

package-lock.json

package-lock.json registrerar den exakta versionen av varje installerat paket (och deras transitiva beroenden). Checka in filen för att säkerställa att alla utvecklare och CI använder identiska versioner. Redigera den aldrig manuellt.

node_modules och .gitignore

Checka aldrig in node_modules – mappen kan vara hundratals MB stor. Lägg alltid till den i .gitignore. Vem som helst kan återskapa den med npm install.

# .gitignore
node_modules/

Uppdatera och ta bort paket

npm update uppdaterar paket inom deras semver-intervall. npm outdated visar vad som kan uppdateras. npm uninstall package tar bort ett paket.

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

npm jämfört med yarn och pnpm

Alternativ till npm: yarn (snabbare, workspaces, Plug'n'Play), pnpm (diskeffektivt symlink-lager, strikta beroenden, snabbast för monorepon). Kärnkommandona liknar varandra i alla tre.

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

Snabbkontroll

Vad gör flaggan -D när ni kör npm install -D jest?

Besvara frågan i den interaktiva lektionen

Sammanfattning: npm och package.json

npm init skapar package.json. npm install lägger till beroenden. -D används för devDependencies. ^ i semver betyder kompatibla uppdateringar. Skript kör kommandon med npm run. package-lock.json registrerar exakta versioner – checka in den. node_modules ska anges i .gitignore. npx kör engångskommandon från paket.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”npm och package.json: dependencies scripts” gratis?

Ja – hela texten till ”npm och package.json: dependencies scripts” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”npm och package.json: dependencies scripts”?

Initiera ett projekt med npm init, lägg till runtime- och utvecklingsberoenden, skriv återanvändbara npm-skript och förstå semver. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”npm och package.json: dependencies scripts”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Frontend Academy-lektionen?

Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

ES-moduler: import export och dynamisk import
npm och package.json: dependencies scripts
Vite: utvecklingsserver och build
Bundlingkoncept: tree shaking och code splitting

← Tillbaka till Frontend Academy