szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[:oktatas:web:express|< Express]]

====== Express - TypeScript ESBuild ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Szerkesztve: 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Bevezetés =====

Ha "production" alkalmazást szeretnénk egyetlen, tömörített fájlba összerakni (bundle), 
az ESBuild jó választás.

A TypseScript egy népszerű kiegészítése a JavaScript nyelvnek, használata 
könnyebbé teheti a fejlesztés folyamatát.

Az ESBuild pedig a leggyorsabb build eszköz manapság, amit Go nyelven írtak. 

Ebben a leírásban a TypeScript nyelven írt kódot az ESBuild eszközzel fordítjuk,
a teljes fejlesztéis folyamatban. Megnézzük, hogyan kell összeállítani egy ilyen projektet.



<note tip>
Egy projekt hordozása során problémát jelenthet, az ESBuild használata, mivel 
Go nyelven íródott, natív kódként fut a node_modules könyvtárban. A probléma
akkor fordulhat elő, ha a projektet a **node_modules** könyvtárral együtt
visszük egy másik operációs rendszerre. 

Ha a hordozás során node_modules könyvtár ki van zárva, nem lesz probléma.
Ha Git verzió követőt használunk, ez általában így szokott lenni, a 
.gitignore fájlba be kerül a node_modules/ könyvtár. A másik gépen pedig telepítjük a 
függőségeket, így nem fordul elő ez a probléma.

  npm install
</note>

===== Ajánlott könyvtárszerkezet =====

<code>
app01/
  |-src/
  |  `-index.ts
  |-package.json
  `-README.md
</code>

A projekt használata során automatikusan generálódik app, node_modules és a dist könyvtár.

===== package.json modulok beállítása =====

A "type" tulajdonságot állítsuk ESM-re vagyis "module" értékre:

<code json5>
{
  "type": "module"
}
</code>

===== Függőségek =====

<code javascript>
{
  "devDependencies": {
    "@types/express": "^5.0.0",
    "@types/node": "^22.10.3",
    "esbuild": "^0.24.2",
    "typescript": "^5.7.2"
  },
  "dependencies": {
    "express": "^4.21.2",
    "nodemon": "^3.1.9"
  },
}
</code>

===== Feladatok =====

<code javascript>
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon app --watch app",
    "dev": "node dev.js",
    "build": "node build.js"
  },
</code>

===== ESBuild scriptek =====

A fejlesztési folyamathoz:

<code javascript dev.js>
import * as esbuild from 'esbuild';

(async () => {
  let ctx = await esbuild.context({
    entryPoints: ['src/**/*.ts'],
    outdir: 'app',
    bundle: true,
    platform: 'node',
    format: 'esm',
    packages: 'external',
  });

  await ctx.watch();
})();
</code>

A kész termék elkészítéséhez, vagyis a build folyamathoz:

<code javascript build.js>
import * as esbuild from 'esbuild';

(async () => {
  let ctx = await esbuild.build({
    entryPoints: ['src/**/*.ts'],
    outdir: 'dist',
    bundle: true,
    minify: true,
    platform: 'node',
    format: 'esm',
    packages: 'external',
  });
})();

</code>

===== Forrás és cél =====

  * Az alkalmazást TypeScript nyelven az src könyvtárban írjuk.
  * Az alkalmazást fejlesztési időben az app könyvtárból futtatjuk.

A TypeScript nyelven használhatunk ES modulokat, azaz "import" utasításokkal dolgozunk.

Az app könyvtárban a lefordított kód ESM formába fordul.


===== Teszt projekt állományai =====

<code javascript package.json>
{
  "name": "app01",
  "version": "0.0.1",
  "description": "A project created by the Sinto command",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon app --watch app",
    "dev": "node dev.js",
    "build": "node build.js"
  },
  "devDependencies": {
    "@types/express": "^5.0.0",
    "@types/node": "^22.10.3",
    "esbuild": "^0.24.2",
    "typescript": "^5.7.2"
  },
  "dependencies": {
    "express": "^4.21.2",
    "nodemon": "^3.1.9"
  },
  "type": "module"
}
</code>

<code javascript src/index.ts>
import express, { Request, Response } from 'express';
const app = express();
const PORT = 8000;

app.get('/', (req: Request, res: Response) => {
  res.send('Helló Világ!');
});

app.listen(PORT, () => {
  console.log(`Server is listening: ${PORT}`);
});

</code>

===== Fejlesztési folyamat =====

Indítsuk el az esbuild-t, majd a nodemon segítségével futtassuk az app könyvtárból az alkalmazást.

  npm run dev
  npm start

===== Következtetés =====

Az ESBuild remek választás ha szeretnénk "production" kódot egyetlen fájlban, tömörítve használni.

Azonban, nem kötelező fejlesztés teljes folyamata során is használni. A fejlesztést során fordíthatjuk a TypesCript kódot ts-node vagy tsc parancsokkal, az ESBuild eszközt pedig csak a build folyamat során futtatjuk.