31.10.2023 в 21:19

Создание Express приложения с помощью TypeScript и SWC

Создание приложения Express с помощью TypeScript и его компиляция может показаться сложной задачей, особенно для новичков. В этом сообщении блога мы стремимся упростить процесс, предоставив шаблон для приложения Express с использованием TypeScript и скомпилировав его с помощью SWC.

SWC — это транспилятор и компилятор на основе Rust, который легко настроить и который может значительно упростить рабочий процесс разработки.

Давайте начнём!

Настройка вашего проекта

Начните с создания нового каталога и инициализации проекта:

mkdir express-app
cd express-app
pnpm init

Установка SWC

Далее установите необходимые пакеты SWC.

pnpm i -D @swc/cli @swc/core

С помощью SWC вы можете создать файл конфигурации для своего проекта. Создайте файл .swcrc в корневом каталоге проекта. В этом файле укажите, что вы используете TypeScript и вам необходимо скомпилировать его в CommonJS:

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "dynamicImport": true,
      "decorators": false
    },
    "transform": null,
    "target": "es2016",
    "loose": false,
    "externalHelpers": false,
    "keepClassNames": false
  },
  "module": {
    "type": "commonjs",
    "strict": false,
    "strictMode": false,
    "noInterop": false,
    "lazy": false
  },
  "minify": true
}

Настройка Express

Чтобы создать приложение Express, начните с установки пакета Express:

pnpm i express
pnpm i -D @types/express @types/node

Теперь создайте два новых файла в каталоге src/: index.ts (точка входа вашего проекта) и server.ts (ваше серверное приложение):

mkdir src
touch src/index.ts
touch src/server.ts

В server.ts создайте приложение Express и откройте его:

// server.ts
import { createServer } from "http";
import express from "express";

export const server = async () => {
  const app = express();

  app.get("/", (req, res) => {
    res.send("Hello World!");
  });

  const server = createServer(app);

  server.listen(4000, () => {
    console.log(`Server running in 4000`);
  });
};

В index.ts вызовите сервер, чтобы запустить его:

import { server } from "./server";

server();

Теперь, когда вы запускаете точку входа (index.ts), она вызывает сервер и создает приложение Express.

Конфигурация TypeScript

Чтобы установить и настроить TypeScript для вашего проекта, выполните следующие команды:

pnpm i typescript
npx tsc --init

Команда tsc --init создаст файл tsconfig.json с настройками по умолчанию, который вы можете оставить как есть.

Определение сценариев

Когда все настроено, вы можете создавать сценарии для сборки и запуска вашего сервера. Откройте package.json и добавьте следующие скрипты:

"scripts": {
    "build": "swc src --out-dir dist",
    "start": "node dist/index.js",
}

Сценарий сборки скомпилирует ваш проект с использованием SWC, а сценарий запуска запустит скомпилированное приложение.

Чтобы запустить сервер, просто выполните pnpm run build и pnpm run start.

Рабочий процесс разработки

Для улучшения процесса разработки вы можете использовать Nodemon для отслеживания изменений в вашем проекте и автоматической перекомпиляции и перезапуска сервера. Чтобы установить Nodemon, выполните следующую команду:

pnpm i -D nodemon

Затем добавьте в package.json сценарий разработки для просмотра изменений и перезапуска сервера:

"scripts": {
    "build": "swc src --out-dir dist",
    "start": "node dist/index.js",
    "dev": "nodemon --watch src --ext ts --exec 'npm run build && npm start'"
}

При такой настройке вы можете использовать команду pnpm run dev для запуска вашего сервера в среде разработки. Nodemon будет отслеживать изменения в ваших файлах TypeScript, автоматически перестраивать и перезапускать сервер, делая ваш рабочий процесс разработки более эффективным.

Вот и все!

Теперь у вас есть приложение Express с TypeScript и SWC, настроенное как для среды разработки, так и для производственной среды. Приятного кодирования!

Проект на GitHub

Источник:

Comment button

#TypeScript #Express

133

Войти на сайт