Сборка

Команда deno bundle выводит один файл JavaScript со всеми зависимостями.

В основе deno bundle лежит ESBuild.

Этот инструмент пригодится для развёртывания или распространения проекта в виде одного оптимизированного JS-файла.

Поддерживаемые возможности

• Разрешает и встраивает все зависимости
• Поддерживает JSX/TSX, TypeScript и современный JavaScript, включая атрибуты импорта и CSS
• Поддержка HTML-файлов в качестве точек входа (Deno 2.5+)
• Необязательная минификация (--minify) и карты исходного кода (--sourcemap)
• Разделение кода
• Выбор целевой платформы (--platform, поддерживаются Deno и браузер)
• Поддержка JSX при соответствующей настройке

Простой пример

import chalk from "npm:chalk";

console.log(chalk.red("Hello from `deno bundle`!"));

$ deno bundle main.ts > bundle.js

# Or with an explicit output file:

$ deno bundle -o bundle.js main.ts

Приведённая выше команда создаёт один файл bundle.js, содержащий все зависимости, — автономный файл приложения:

$ deno bundle.js
Hello from `deno bundle`!

В файле, который вы собираете, можно использовать импорты из JSR, npm, http(s) и локальные импорты; deno bundle соберёт все исходные файлы и создаст один выходной файл.

Обзор параметров

Полный список флагов можно посмотреть, выполнив команду deno bundle --help.

Объявления типов

Передайте --declaration, чтобы создать файлы объявлений TypeScript рядом со собранным JavaScript. Deno объединяет типы для каждой точки входа в один автономный файл .d.ts, поэтому пользователи сборки получают полную информацию о типах без исходного кода:

deno bundle main.ts --outdir dist --declaration
# Produces dist/main.js and dist/main.d.ts

Это важно, если вы поставляете сборку как библиотеку: файл .d.ts позволяет проектам TypeScript, использующим вашу библиотеку, проверять типы в соответствии с её публичным API. Для каждой точки входа создаётся отдельный файл объявлений рядом с соответствующим выходным файлом JavaScript.

API времени выполнения

Помимо CLI, для программной сборки файлов JavaScript или TypeScript можно использовать Deno.bundle(). Это позволяет включить сборку в процессы и сценарии сборки.

Простое использование

const result = await Deno.bundle({
  entrypoints: ["./index.tsx"],
  outputDir: "dist",
  platform: "browser",
  minify: true,
});
console.log(result);

Обработка результатов в памяти

Можно также обрабатывать результаты сборки в памяти, не записывая их на диск:

const result = await Deno.bundle({
  entrypoints: ["./index.tsx"],
  output: "dist",
  platform: "browser",
  minify: true,
  write: false,
});

for (const file of result.outputFiles!) {
  console.log(file.text());
}

Такой подход предоставляет больше гибкости при интеграции сборки в различные рабочие процессы: например, можно напрямую отдавать собранные файлы из памяти или дополнительно обрабатывать результат.

Поддержка HTML-файлов в качестве точек входа

Начиная с Deno 2.5, deno bundle поддерживает HTML-файлы в качестве точек входа. Ранее в качестве точек входа можно было использовать только файлы .js/.ts/.jsx/.tsx.

deno bundle --outdir dist index.html

Если использовать HTML-файл в качестве точки входа, deno bundle выполнит следующие действия:

1. Найдёт все ссылки на скрипты в HTML-файле
2. Соберёт эти скрипты и их зависимости
3. Обновит пути в HTML-файле, чтобы они указывали на собранные скрипты
4. Соберёт все импортированные CSS-файлы и встроит их в выходной HTML-файл

Пример

Дан файл index.tsx:

import { render } from "npm:preact";
import "./styles.css";

const app = (
  <div><p>Hello World!</p></div>
);

render(app, document.body);

И HTML-файл, который на него ссылается:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="./index.tsx" type="module"></script>
  </head>
</html>

В результате выполнения команды deno bundle --outdir dist index.html получится:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="./index-2TFDJWLF.js" type="module" crossorigin></script>
    <link rel="stylesheet" crossorigin href="./index-EWSJYQGA.css">
  </head>
</html>

В собранном результате используются хеши на основе содержимого для сброса кэша и идентификации версий файлов.

HTML-файлы в качестве точек входа полностью поддерживаются как в CLI, так и в упомянутом выше API времени выполнения.

Когда использовать сборку HTML

• deno bundle index.html — отличный выбор для небольших статических приложений, когда нужно быстро собрать проект в готовый пакет
• Vite — лучше подходит для сложных проектов, которым полезны широкие возможности экосистемы Vite

Оба подхода прекрасно работают с Deno, поэтому выберите тот, который лучше всего подходит для вашего рабочего процесса.

Сборка страницы React для веба

Начните с app.jsx и index.html:

import React from "npm:react";
import { createRoot } from "npm:react-dom/client";

function App() {
  return <h1>Hello, React!</h1>;
}

const root = createRoot(document.getElementById("root"));
root.render(<App />);

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script type="module" src="/bundle.js"></script>
  </body>
</html>

Теперь выполним сборку:

$ deno bundle --platform=browser app.jsx -o bundle.js
⚠️ deno bundle is experimental and subject to changes
Bundled 9 modules in 99ms
  bundle.js 874.67KB

Теперь страницу можно запустить. Используем @std/http/file-server, чтобы обслуживать наше приложение:

$ deno run -ENR jsr:@std/http/file-server
Listening on http://127.0.0.1:8000

Открыв страницу в браузере, вы увидите: