Быстрый старт с Bun JS

Обзор

Создайте минимальный HTTP-сервер с Bun.serve, запустите его локально, затем развивайте его, установив пакет.

::: Предварительные требования: Bun установлен и доступен в вашем PATH. См. установку для настройки. :::

Инициализируйте новый проект с bun init.

bash

bun init my-app

Он предложит выбрать шаблон: Blank, React или Library. Для этого руководства мы выберем Blank.

bash

bun init my-app

bash

✓ Выберите шаблон проекта: Blank

- .gitignore
- CLAUDE.md
- .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc -> CLAUDE.md
- index.ts
- tsconfig.json (для автодополнения в редакторе)
- README.md

Это автоматически создаст каталог my-app с базовым приложением Bun.

Запустите файл index.ts с помощью bun run index.ts.

bash

cd my-app
bun run index.ts

bash

Hello via Bun!

Вы должны увидеть вывод консоли с сообщением "Hello via Bun!".

Замените содержимое index.ts следующим кодом:

const server = Bun.serve({
  port: 3000,
  routes: {
    "/": () => new Response('Bun!'),
  }
});

console.log(`Listening on ${server.url}`);

Запустите файл index.ts снова с помощью bun run index.ts.

bash

bun run index.ts

bash

Listening on http://localhost:3000

Посетите http://localhost:3000 для тестирования сервера. Вы должны увидеть простую страницу с надписью "Bun!".

Видите ошибки TypeScript в Bun?

Если вы использовали bun init, Bun автоматически установит объявления TypeScript для Bun и настроит ваш tsconfig.json. Если вы пробуете Bun в существующем проекте, вы можете увидеть ошибку типа для глобального объекта Bun.

Чтобы исправить это, сначала установите @types/bun как dev-зависимость.

bash

bun add -d @types/bun

Затем добавьте следующее в ваши compilerOptions в tsconfig.json:

json

{
  "compilerOptions": {
    "lib": ["ESNext"],
    "target": "ESNext",
    "module": "Preserve",
    "moduleDetection": "force",
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true
  }
}

Установите пакет figlet и его объявления типов. Figlet — это утилита для преобразования строк в ASCII-арт.

bash

bun add figlet
bun add -d @types/figlet # только для пользователей TypeScript

Обновите index.ts, чтобы использовать figlet в routes.

import figlet from 'figlet';

const server = Bun.serve({
  port: 3000,
  routes: {
    "/": () => new Response('Bun!'),
    "/figlet": () => {
      const body = figlet.textSync('Bun!');
      return new Response(body);
    } 
  }
});

Запустите файл index.ts снова с помощью bun run index.ts.

bash

bun run index.ts

bash

Listening on http://localhost:3000

Посетите http://localhost:3000/figlet для тестирования сервера. Вы должны увидеть простую страницу с надписью "Bun!" в ASCII-арте.

bash

____              _
| __ ) _   _ _ __ | |
|  _ \| | | | '_ \| |
| |_) | |_| | | | |_|
|____/ \__,_|_| |_(_)

Добавим немного HTML. Создайте новый файл с именем index.html и добавьте следующий код:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bun</title>
  </head>
  <body>
    <h1>Bun!</h1>
  </body>
</html>

Затем импортируйте этот файл в index.ts и обслуживайте его из корневого маршрута /.

import figlet from 'figlet';
import index from './index.html'; 

const server = Bun.serve({
  port: 3000,
  routes: {
    "/": index, 
    "/figlet": () => {
      const body = figlet.textSync('Bun!');
      return new Response(body);
    }
  }
});

console.log(`Listening on ${server.url}`);

Запустите файл index.ts снова с помощью bun run index.ts.

bash

bun run index.ts

txt

Listening on http://localhost:3000

Посетите http://localhost:3000 для тестирования сервера. Вы должны увидеть статическую HTML-страницу.

🎉 Поздравляем! Вы создали простой HTTP-сервер с Bun и установили пакет.

Запуск скрипта

Bun также может выполнять "scripts" из вашего package.json. Добавьте следующий скрипт:

json

{
  "name": "quickstart",
  "module": "index.ts",
  "type": "module",
  "private": true,
  "scripts": { 
    "start": "bun run index.ts"
  }, 
  "devDependencies": {
    "@types/bun": "latest"
  },
  "peerDependencies": {
    "typescript": "^5"
  }
}

Затем запустите его с помощью bun run start.

bash

bun run start

bash

Listening on http://localhost:3000

INFO

Производительность — bun run примерно в 28 раз быстрее, чем npm run (6 мс против 170 мс накладных расходов).

Обзор ​

Видите ошибки TypeScript в Bun? ​

Запуск скрипта ​

Обзор

Видите ошибки TypeScript в Bun?

Запуск скрипта