Tartalomjegyzék

< Express

Express - TypeScript ESBuild

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.

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

Ajánlott könyvtárszerkezet

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

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: 

{
  "type": "module"
}

Függőségek

{
  "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"
  },
}

Feladatok

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

ESBuild scriptek

A fejlesztési folyamathoz:

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();
})();

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

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',
  });
})();

Forrás és cél

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

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"
}
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}`);
});

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.