Deno конфигурация

Fresh — это современный фреймворк для разработки веб-приложений на базе Deno, который использует возможности ES-модулей, нативного TypeScript и рендеринга на сервере. Правильная конфигурация Deno является ключевым элементом для стабильной работы Fresh.

Установка Deno

Для установки Deno используется официальный скрипт или пакетный менеджер системы. На Unix-подобных системах команда выглядит так:

curl -fsSL https://deno.land/install.sh | sh

На Windows предпочтительно использовать PowerShell:

iwr https://deno.land/install.ps1 -useb | iex

После установки необходимо проверить версию:

deno --version

Fresh требует Deno версии 1.34 и выше, так как использует последние возможности Deno Deploy и стандартной библиотеки.

Конфигурационный файл deno.json

Для управления проектом и зависимостями Deno использует файл deno.json (или deno.jsonc). Этот файл определяет настройки проекта, права доступа, алиасы для модулей и скрипты запуска. Пример минимальной конфигурации для Fresh:

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "strict": true,
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "tasks": {
    "start": "deno run -A --watch main.ts",
    "lint": "deno lint",
    "fmt": "deno fmt"
  },
  "importMap": "import_map.json"
}
  • compilerOptions задают параметры TypeScript, включая поддержку JSX через Preact, что является стандартом для Fresh.
  • tasks позволяют запускать команды проекта через deno task <имя>.
  • importMap облегчает использование алиасов модулей.

Файл import_map.json

Для удобного управления путями модулей используется import map. Пример для Fresh:

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.7.0/",
    "preact/": "https://esm.sh/preact@10.13.2/",
    "preact/hooks": "https://esm.sh/preact@10.13.2/hooks"
  }
}

Алиасы $fresh/ и preact/ позволяют использовать чистые пути без длинных URL, повышая читаемость кода.

Разрешения Deno

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

  • -A или --allow-all — полные разрешения (для разработки).
  • --allow-net — доступ к сети, нужен для загрузки модулей и API-запросов.
  • --allow-read — доступ к файловой системе, необходим для шаблонов и статики.
  • --allow-env — доступ к переменным окружения.

Пример запуска проекта Fresh:

deno run -A --watch main.ts

Флаг --watch позволяет автоматически перезапускать сервер при изменении файлов.

Подключение TypeScript и JSX

Fresh использует TypeScript и JSX через Preact. В deno.json указаны соответствующие настройки. Важные моменты:

  • jsx: значение react-jsx позволяет компилировать JSX синтаксис без отдельного трансформера.
  • jsxImportSource: значение preact определяет библиотеку для JSX.
  • strict: включает строгую проверку типов, предотвращая ошибки на этапе компиляции.

Эти настройки позволяют Fresh рендерить компоненты на сервере с полной поддержкой TypeScript.

Настройка скриптов разработки

Deno позволяет создавать пользовательские задачи в deno.json. Для Fresh рекомендуется:

"tasks": {
  "start": "deno run -A --watch main.ts",
  "dev": "deno task start",
  "lint": "deno lint",
  "format": "deno fmt"
}

Такое разделение упрощает командную работу с проектом: команда deno task dev запускает сервер с автообновлением, а deno task lint проверяет код на ошибки.

Интеграция с редакторами

Для VS Code и других IDE полезно установить расширения:

  • Deno — поддержка автодополнения, проверка типов и запуск задач.
  • Prettier — форматирование кода в соответствии с Deno.
  • ESLint — анализ кода с учётом стандартов Deno и Preact.

Файл .vscode/settings.json для интеграции с Deno:

{
  "deno.enable": true,
  "deno.lint": true,
  "deno.unstable": true
}

deno.unstable необходим для использования экспериментальных API, которые Fresh может использовать в новых версиях.

Оптимизация конфигурации

  • Разделение dev и prod окружений с разными import map и правами доступа.
  • Использование .env файлов для переменных окружения вместе с --allow-env.
  • Подключение сторонних библиотек через URL с конкретными версиями, чтобы избежать проблем с совместимостью.

Эта структура позволяет легко масштабировать проект, добавлять новые страницы и компоненты, а также интегрировать Fresh с современными инструментами Deno.

Оглавление