Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:typescript:typescript_es_nodejs

< TypeScript

TypeScript és Node.js

Node.js projekt készítése

Lépések

  • Az npm és a tsc parancs ellenőrzése
  • projekt könyvtár létrehozása, és belépés a könyvtárba
  • Visual Studio Code indítása
  • Node.js projekt indítása
  • webserver telepítése
  • bootstrap telepítése
  • .gitignore fájl készítse
  • src/ index.html és app.ts készítése
  • a projekt indítás és fordítás beállítása a package.json fájlban
  • A git felkészítése

Lépések részletezése

Ellenőrzés

Az npm és a tsc parancs ellenőrzése:

npm --version
tsc --version

Könyvtár készítése

Projekt könyvtár készítése és belépés:

mkdir projekt01
cd projekt01

Visual Studio Code

Visual Studio Code indítása:

code .

Node.js projekt

Node.js projekt indítása:

  • indítsunk a Visula Studo Code szerkesztőben egy terminált
  • Válasszunk Command Prompt vagy Bash terminált:
    • F1
    • Terminal: Select Default Profile
  • A terminálban:
npm init -y

Telepítések

Webszerver telepítése:

npm install --save-dev lite-server

Bootstrap telepítése:

npm install bootstrap

A .gitignore

A .gitignore fájl tartalma:

.gitignore
node_modules/

Könyvtár és fájl struktúra

Az src/ index.html és app.ts készítése:

A Visual Studo Code szerkesztőben elkészítjük a könyvtárakat és fájlokat.

TypeScript konfigurációs fájl

tsconfig.json
{
    "compilerOptions": {
        "rootDir": "src",
        "target": "es6",
        "watch": true
    }
}

lite-server konfigurációs fájl

bs-config.json
{
    "server": ["src"]
}

A package.json fájl

A package.json fájlban javítsunk két scriptet:

    "start": "lite-server",
    "tsc": "tsc"

Teljes package.json fájl:

package.json
{
  "name": "projekt01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server",
    "tsc": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.6.1"
  },
  "dependencies": {
    "bootstrap": "^5.1.3"
  }
}

A git felkészítése

Indítsunk egy új terminált.

Ellenőrizzük a git felhasználót:

git config --global user.name
git config --global user.email

Ha szükséges állítsuk be, globálisan vagy helyileg.

Hozzuk létre a Git tárolót:

git init

A kezdeti weblap

index.html
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Kezdés</h1>
 
    <script src="app.js"></script>
</body>
</html>

Írjunk egy rövid TypeScriptet is:

app.js
console.log('Helló');

A szerver és a fordító indítása

Két terminálra van szükségünk. Az első terminálban indítjuk a webszervert, a másodikban a fordítót.

A szerver indítása:

npm start

A fordító indítása:

npm run tsc

Ha mentünk a Visual Studio Code-ban az eredmény azonnal látszik az app.js fájlban és a böngészőben is; elkezdhetjük a projektet.

oktatas/web/typescript/typescript_es_nodejs.txt · Utolsó módosítás: 2024/07/28 10:27 szerkesztette: admin