GKNB_MSTM071/Alapok/npm_package.tex

\section{NPM Package Manager}
\subsection{}

\begin{frame}{Mi az npm?}
  \begin{itemize}
    \item \kiemel{Node Package Manager} - Node.js csomagkezelő
    \item A világ legnagyobb szoftver registry-je (2+ millió csomag)
    \item Node.js-szel együtt települ
    \item Csomagok telepítése, kezelése, megosztása
    \item Projekt függőségek kezelése
  \end{itemize}
  \vspace{0.5cm}
  \begin{block}{Verziószám ellenőrzése}
    \texttt{node --version} \hspace{1cm} \texttt{npm --version}
  \end{block}
  \vspace{0.3cm}
  \begin{block}{Alternatívák}
    \kiemelZ{yarn}, \kiemelZ{pnpm} - gyorsabb, hatékonyabb csomagkezelők
  \end{block}
\end{frame}

\begin{frame}[fragile,shrink=10]{npm init - Projekt inicializálás}
  \begin{block}{Interaktív projekt létrehozás}
    \begin{lstlisting}[language=bash]
npm init
    \end{lstlisting}
  \end{block}
  
  \begin{block}{Gyors inicializálás alapértelmezett értékekkel}
    \begin{lstlisting}[language=bash]
npm init -y
# vagy
npm init --yes
    \end{lstlisting}
  \end{block}
  
  \vspace{0.3cm}
  \begin{alertblock}{Eredmény}
    Létrejön a \kiemel{package.json} fájl, amely a projekt metaadatait tartalmazza
  \end{alertblock}
\end{frame}

\begin{frame}[fragile,shrink=10]{package.json struktúra}
  \begin{block}{Alapvető package.json}
    \begin{lstlisting}[style=JavaScript, basicstyle=\tiny\ttfamily]
{
  "name": "my-backend-app",
  "version": "1.0.0",
  "description": "Backend alkalmazas Node.js-sel",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest"
  },
  "keywords": ["nodejs", "backend", "api"],
  "author": "Magda Donat",
  "license": "MIT",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}
    \end{lstlisting}
  \end{block}
\end{frame}

\begin{frame}[fragile,shrink=10]{Csomagok telepítése}
  \begin{block}{Telepítés production függőségként}
    \begin{lstlisting}[language=bash]
npm install express
# vagy rovidebben
npm i express

# Tobbe csomag egyszerre
npm install express prisma dotenv
    \end{lstlisting}
  \end{block}
  
  \begin{block}{Telepítés development függőségként}
    \begin{lstlisting}[language=bash]
npm install --save-dev nodemon
# vagy
npm i -D nodemon jest eslint
    \end{lstlisting}
  \end{block}
  
  \begin{alertblock}{Mi a különbség?}
    \textbf{dependencies:} éles környezetben is kell | \textbf{devDependencies:} csak fejlesztéshez
  \end{alertblock}
\end{frame}

\begin{frame}[fragile,shrink=10]{Csomagok kezelése}
  \begin{columns}
    \begin{column}{0.5\textwidth}
      \begin{block}{Telepítés specifikus verzióval}
        \begin{lstlisting}[language=bash]
npm i express@4.18.0

# Legfrissebb verzio
npm i express@latest
        \end{lstlisting}
      \end{block}
      
      \begin{block}{Globális telepítés}
        \begin{lstlisting}[language=bash]
npm install -g nodemon
npm i -g typescript
        \end{lstlisting}
      \end{block}
    \end{column}
    \begin{column}{0.5\textwidth}
      \begin{block}{Eltávolítás}
        \begin{lstlisting}[language=bash]
npm uninstall express
npm un express

# Globalis eltavolitas
npm uninstall -g nodemon
        \end{lstlisting}
      \end{block}
      
      \begin{block}{Frissítés}
        \begin{lstlisting}[language=bash]
npm update
npm update express
        \end{lstlisting}
      \end{block}
    \end{column}
  \end{columns}
\end{frame}

\begin{frame}{Semantic Versioning (SemVer)}
  \begin{block}{Verzió formátum: \kiemel{MAJOR.MINOR.PATCH}}
    \texttt{1.2.3} $\rightarrow$ \kiemelN{1} (major) . \kiemelZ{2} (minor) . \kiemel{3} (patch)
  \end{block}
  
  \vspace{0.3cm}
  \begin{itemize}
    \item \kiemelN{MAJOR:} Nem kompatibilis API változások
    \item \kiemelZ{MINOR:} Új funkciók, visszafelé kompatibilis
    \item \kiemel{PATCH:} Hibajavítások, visszafelé kompatibilis
  \end{itemize}
  
  \vspace{0.5cm}
  \begin{table}
    \centering
    \begin{tabular}{|l|l|}
      \hline
      \textbf{Jelölés} & \textbf{Jelentés} \\
      \hline
      \texttt{1.2.3} & Pontosan 1.2.3 verzió \\
      \hline
      \texttt{\textasciicircum1.2.3} & $\geq$ 1.2.3 és $<$ 2.0.0 (MINOR frissítések) \\
      \hline
      \texttt{\textasciitilde1.2.3} & $\geq$ 1.2.3 és $<$ 1.3.0 (PATCH frissítések) \\
      \hline
      \texttt{*} vagy \texttt{latest} & Legfrissebb verzió \\
      \hline
    \end{tabular}
  \end{table}
\end{frame}

\begin{frame}[fragile,shrink=10]{npm scripts}
  \begin{block}{Scripts definiálása package.json-ben}
    \begin{lstlisting}[style=JavaScript]
{
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest",
    "build": "tsc",
    "lint": "eslint .",
    "format": "prettier --write ."
  }
}
    \end{lstlisting}
  \end{block}
  
  \begin{block}{Scripts futtatása}
    \begin{lstlisting}[language=bash]
npm run dev
npm run test
npm start    # 'run' nelkul is mukodik (start, test, stop)
    \end{lstlisting}
  \end{block}
\end{frame}

\begin{frame}[fragile,shrink=10]{node\_modules és package-lock.json}
  \begin{columns}
    \begin{column}{0.5\textwidth}
      \begin{block}{node\_modules}
        \begin{itemize}
          \item Telepített csomagok mappája
          \item Nagyon nagy lehet (100+ MB)
          \item \kiemel{Ne commitoljuk} git-be!
          \item .gitignore-ba: \texttt{node\_modules/}
          \item Újragenerálás: \texttt{npm install}
        \end{itemize}
      \end{block}
    \end{column}
    \begin{column}{0.5\textwidth}
      \begin{block}{package-lock.json}
        \begin{itemize}
          \item Pontos verziókat rögzít
          \item Függőségek fája
          \item Determinisztikus telepítés
          \item \kiemelZ{Commitoljuk} git-be!
          \item Reprodukálható build-ek
        \end{itemize}
      \end{block}
    \end{column}
  \end{columns}
  
  \vspace{0.5cm}
  \begin{alertblock}{Fontos}
    \texttt{npm install} a package-lock.json alapján telepít (ha létezik)
  \end{alertblock}
\end{frame}

\begin{frame}[fragile,shrink=10]{Hasznos npm parancsok}
  \begin{columns}
    \begin{column}{0.5\textwidth}
      \begin{block}{Információk lekérése}
        \begin{lstlisting}[language=bash]
# Telepitett csomagok listaja
npm list

# Elavult csomagok
npm outdated

# Csomag informacio
npm info express

# Csomag keresese
npm search prisma
        \end{lstlisting}
      \end{block}
    \end{column}
    \begin{column}{0.5\textwidth}
      \begin{block}{Karbantartás}
        \begin{lstlisting}[language=bash]
# Cache torlese
npm cache clean --force

# Fuggosegek auditja
npm audit

# Sebezhetosegek javitasa
npm audit fix

# Projekt tisztitas
rm -rf node_modules
npm install
        \end{lstlisting}
      \end{block}
    \end{column}
  \end{columns}
\end{frame}

\begin{frame}[fragile,shrink=10]{npx - Csomag futtatás telepítés nélkül}
  \begin{block}{npx használata}
    \begin{lstlisting}[language=bash]
# Egyszeri futtatas telepites nelkul
npx create-react-app my-app
npx prisma init
npx tsx index.ts

# Lokalis csomag futtatas
npx nodemon index.js
    \end{lstlisting}
  \end{block}
  
  \vspace{0.3cm}
  \begin{block}{Előnyök}
    \begin{itemize}
      \item Nem szennyezi a globális telepítéseket
      \item Mindig a legfrissebb verzió
      \item Gyors prototípuskészítés
      \item CLI eszközök futtatása
    \end{itemize}
  \end{block}
\end{frame}

\begin{frame}[fragile,shrink=10]{Gyakori csomagok Backend fejlesztéshez}
  \begin{block}{Production dependencies}
    \begin{lstlisting}[language=bash]
npm i express              # Web framework
npm i @prisma/client       # ORM kliens
npm i dotenv               # Kornyezeti valtozok
npm i cors                 # CORS middleware
npm i bcrypt               # Jelszo hash
npm i jsonwebtoken         # JWT token
npm i express-validator    # Validacio
    \end{lstlisting}
  \end{block}
  
  \begin{block}{Development dependencies}
    \begin{lstlisting}[language=bash]
npm i -D nodemon          # Auto-restart
npm i -D prisma           # ORM CLI
npm i -D typescript       # TypeScript
npm i -D @types/node      # Node.js tipusok
    \end{lstlisting}
  \end{block}
\end{frame}

\begin{frame}[fragile,shrink=10]{.npmrc - npm konfiguráció}
  \begin{block}{Projekt .npmrc fájl}
    \begin{lstlisting}[language=bash]
# Pontos verziot ment (^ nelkul)
save-exact=true

# Engine strict mod
engine-strict=true

# Automaikus audit
audit=true
    \end{lstlisting}
  \end{block}
  
  \begin{block}{package.json - Node verzió megkötés}
    \begin{lstlisting}[style=JavaScript]
{
  "engines": {
    "node": ">=18.0.0",
    "npm": ">=9.0.0"
  }
}
    \end{lstlisting}
  \end{block}
\end{frame}

\begin{frame}{npm Registry és publikálás}
  \begin{itemize}
    \item \kiemel{npmjs.com} - Publikus npm registry
    \item Ingyenes, bárki publikálhat csomagot
    \item Saját csomag publikálás: \texttt{npm publish}
    \item Privát csomagok: fizetős npm Pro/Teams
    \item Alternatív registry-k: GitHub Packages, Verdaccio
  \end{itemize}
  
  \vspace{0.5cm}
  \begin{block}{Saját csomag publikálás lépései}
    \begin{enumerate}
      \item \texttt{npm login} - Bejelentkezés
      \item package.json konfiguráció
      \item \texttt{npm publish} - Publikálás
      \item \texttt{npm version patch/minor/major} - Verziókezelés
    \end{enumerate}
  \end{block}
\end{frame}

\begin{frame}{Összefoglalás}
  \begin{block}{npm alapok}
    \begin{itemize}
      \item npm: Node Package Manager, 2+ millió csomag
      \item \texttt{npm init} - projekt inicializálás
      \item \texttt{npm install/uninstall/update} - csomagkezelés
      \item package.json: projekt metaadatok, függőségek, scripts
      \item Semantic Versioning: MAJOR.MINOR.PATCH
      \item dependencies vs devDependencies
      \item node\_modules (ne commit), package-lock.json (commit)
      \item npm scripts: egyéni parancsok definiálása
      \item npx: csomagok futtatása telepítés nélkül
    \end{itemize}
  \end{block}
\end{frame}