Покращення розробки Fullstack за допомогою HTML Imports в Bun

З виходом Bun 1.2 з'явилася нова можливість — HTML Imports, яка визначає новий підхід до розробки fullstack додатків. У цій статті ми розглянемо концепцію HTML Imports, як це працює та інші особливості.

Що таке HTML Imports?

HTML Imports в Bun дозволяють розробникам імпортувати та обробляти HTML файли безпосередньо в їх JavaScript або TypeScript коді. Це не те саме, що застаріла специфікація HTML Imports для браузера. Натомість реалізація Bun зосереджена на бандлінгу, оптимізації та подачі статичних ресурсів без зайвих складнощів.

import homepage from "./index.html";  
import dashboard from "./dashboard.html";  

Bun.serve({  
 static: {  
 "/": homepage,  
 "/dashboard": dashboard,  
 },  
 async fetch(req) {  
 return new Response("Hello, world!");  
 },  
});

У цьому фрагменті Bun автоматично бандлить і подає файли index.html та dashboard.html, включаючи їх відповідні скрипти та стилі.

HTML Imports спрощують робочі процеси, дозволяючи безшовну інтеграцію фронтенду та бекенд, даючи можливість керувати статичними ресурсами та API в межах одного середовища виконання. Оптимізації Bun забезпечують швидкі збірки, хороше кешування та підтримку сучасних технологій, таких як React, Tailwind CSS і багатьох інших.

Як працюють HTML Imports

Коли ви імпортуєте HTML файл у Bun, він виконує кілька задач. Спочатку він аналізує HTML і перевіряє на наявність...

... 

В результаті цього процесу отримаємо ось таке:

    ```  

Використання React з HTML Imports

HTML Imports від Bun інтегруються безшовно з React та іншими сучасними технологіями. Ось приклад, щоб продемонструвати робочий процес:

На бекенді (src/backend.ts) ми подаємо файл dashboard.html як статичний маршрут. Сервер налаштований через Bun.serve() для обробки та обслуговування як API запитів, так і статичних файлів:

import dashboard from "./public/dashboard.html";  
import { serve } from "bun";  

serve({  
  static: {  
    "/": dashboard,  
  },  
  async fetch(req) {  
    return new Response("Hello from Bun!");  
  },  
});  

На фронтенді (src/frontend.tsx) використовуємо React для рендерингу додатку.
Бібліотека react-dom/client імпортується для створення та рендерингу кореневого компонента:

import { createRoot } from "react-dom/client";  
import { App } from "./app";  

const root = createRoot(document.getElementById("root"));  
root.render();

HTML точка входу (public/dashboard.html) підключає фронтенд скрипт до кореневого div, в якому React рендеритиме додаток:

        ```  

React компонент (src/app.tsx) є простим, демонструючи базову структуру JSX:

export function App() {
return

;
}
```

Нарешті, ви можете стилізувати додаток за допомогою CSS файлу (src/styles.css):

body {  
  background-color: red;  
}  

Режими: Розробка проти Продукції

При локальній розробці, увімкнення режиму розробки через параметр development: true в Bun.serve() дає кілька переваг. Він включає sourcemaps у заголовках відповіді, вимикає мінімізацію для кращої читабельності та перекомпілює активи кожного разу, коли запитується .html файл. Наприклад:

Bun.serve({  
  static: {  
    "/": homepage,  
  },  
  development: true,  
});

З іншого боку, в продукції, налаштування development: false оптимізує продуктивність. Активи кешуються в пам'яті після першого запиту, зменшуючи надмірну обробку. Додаються заголовки кешування, такі як Cache-Control та ETag, а JavaScript, TypeScript, JSX і CSS мінімізуються. Конфігурація для продукції виглядає наступним чином:

Bun.serve({  
  static: {  
    "/": homepage,  
  },  
  development: false,  
});

Всього один Bun

HTML Imports в Bun — це цікавий спосіб з'єднати робочі процеси бекенду та фронтенду. Спробуйте його сьогодні і подивіться, як це змінить ваш процес розробки.
Не соромтеся зв'язатися зі мною: LinkedIn

Перекладено з: Improving Fullstack Development with Bun’s HTML Imports