0Pricing
Frontend Academy · Lekcja

npm i package.json: zależności i skrypty

Proszę inicjalizować projekt za pomocą npm init, dodawać zależności uruchomieniowe i deweloperskie, pisać wielokrotnego użytku skrypty npm oraz zrozumieć semver.

npm i package.json: zależności i skrypty to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Czym jest npm?

npm (Node Package Manager) zarządza zależnościami i skryptami projektu. Odczytuje package.json, aby wiedzieć, co zainstalować, i zapisuje package-lock.json, aby rejestrować dokładne wersje. W rejestrze npm opublikowano ponad dwa miliony pakietów.

Inicjalizowanie projektu

npm init -y tworzy plik package.json z wartościami domyślnymi. Flaga -y akceptuje wszystkie wartości domyślne bez wyświetlania pytań.

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

Plik package.json

Najważniejsze pola to: name, version, description, main (punkt wejścia), 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"
  }
}

Instalowanie pakietów

npm install package dodaje pakiet do dependencies. npm install -D package dodaje go do devDependencies (nie jest potrzebny na produkcji). npm install bez argumentów instaluje wszystko, co określono w 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

Wersjonowanie semantyczne

npm używa semver: major.minor.patch. Prefiks ^ pozwala na zgodne aktualizacje (z tą samą wersją major). Prefiks ~ pozwala wyłącznie na aktualizacje patch. Wersje dokładne nie mają prefiksu.

"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

Skrypty npm

Polecenia definiuje się w polu scripts. Uruchamia się je za pomocą npm run scriptname. Wbudowane skrypty (test, start) można uruchamiać bezpośrednio za pomocą npm test lub npm start.

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

npm run a npx

npm run uruchamia skrypt z package.json. npx wykonuje pakiet z node_modules albo tymczasowo go pobiera i uruchamia — przydatne w przypadku jednorazowych poleceń, takich jak npx create-vite@latest.

package-lock.json

package-lock.json rejestruje dokładną wersję każdego zainstalowanego pakietu (oraz jego zależności pośrednich). Należy go zatwierdzać w repozytorium, aby wszyscy programiści i system CI używali identycznych wersji. Nigdy nie edytuj go ręcznie.

node_modules i .gitignore

Nigdy nie zatwierdzaj katalogu node_modules — może zajmować setki MB. Zawsze dodawaj go do .gitignore. Każdy może go odtworzyć za pomocą npm install.

# .gitignore
node_modules/

Aktualizowanie i usuwanie pakietów

npm update aktualizuje pakiety w ramach ich zakresu semver. npm outdated pokazuje, co można zaktualizować. npm uninstall package usuwa pakiet.

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

npm vs yarn vs pnpm

Alternatywy dla npm: yarn (szybszy, obsługa workspaces, Plug'n'Play), pnpm (oszczędny pod względem miejsca magazyn dowiązań symbolicznych, ścisłe zależności, najszybszy w monorepo). Podstawowe polecenia są podobne we wszystkich trzech narzędziach.

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

Szybki test

Co robi flaga -D podczas uruchamiania npm install -D jest?

Podsumowanie: npm i package.json

npm init tworzy package.json. npm install dodaje zależności. -D służy do dodawania zależności deweloperskich. ^ w semver oznacza zgodne aktualizacje. Skrypty uruchamiają polecenia za pomocą npm run. package-lock.json zapisuje dokładne wersje — należy go zatwierdzić w repozytorium. node_modules należy dodać do .gitignore. npx uruchamia jednorazowe polecenia pakietów.

Często zadawane pytania

Czy lekcja „npm i package.json: zależności i skrypty” jest bezpłatna?

Tak — pełny tekst „npm i package.json: zależności i skrypty” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „npm i package.json: zależności i skrypty”?

Proszę inicjalizować projekt za pomocą npm init, dodawać zależności uruchomieniowe i deweloperskie, pisać wielokrotnego użytku skrypty npm oraz zrozumieć semver. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „npm i package.json: zależności i skrypty”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Moduły ES: import, export i dynamic import
  2. npm i package.json: zależności i skrypty
  3. Vite: serwer deweloperski i build
  4. Koncepcje bundlowania: tree shaking i code splitting
← Powrót do Frontend Academy