Системные требования и предварительная подготовка

Минимальные системные требования

Для работы с Preact необходим современный компьютер с установленной операционной системой, поддерживающей Node.js. Минимальные требования включают:

  • Операционная система: Windows 10 или выше, macOS 10.15 или выше, Linux с ядром 4.x и выше.
  • Node.js: версия 16.x или выше. Preact требует поддержки последних стандартов ECMAScript и современных API Node.
  • npm или Yarn: менеджер пакетов для установки зависимостей. Рекомендуется использовать npm 8.x или выше либо Yarn 1.22+.
  • Браузер для отладки: современный Chromium, Firefox или Safari с поддержкой ES6+ и DevTools.

Рекомендуемые системные требования

Для комфортной работы над проектами среднего и большого масштаба рекомендуется:

  • Процессор: 4 ядра и выше, Intel i5/Ryzen 5 или аналог.
  • Оперативная память: 8 ГБ и выше, 16 ГБ предпочтительно для крупных проектов.
  • Хранилище: SSD, минимум 50 ГБ свободного места для Node.js, пакетов и проекта.
  • Среда разработки: Visual Studio Code, WebStorm или аналог с поддержкой TypeScript и JSX.

Установка Node.js и менеджера пакетов

  1. Node.js загружается с официального сайта https://nodejs.org/ в стабильной LTS-версии.
  2. Проверка установки выполняется командой:
node -v
npm -v
  1. Для альтернативного управления пакетами можно установить Yarn:
npm install -g yarn
yarn -v

Настройка проекта на Preact

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

mkdir my-preact-app
cd my-preact-app
npm init -y

После этого устанавливаются основные зависимости Preact:

npm install preact preact-cli

Preact CLI обеспечивает быстрый старт проекта с готовой конфигурацией сборки, поддержкой TypeScript, SCSS и маршрутизации.

Структура базового проекта

После инициализации структура проекта выглядит следующим образом:

my-preact-app/
├─ src/
│  ├─ components/
│  ├─ routes/
│  └─ index.js
├─ public/
│  └─ index.html
├─ package.json
└─ .gitignore
  • src/ — исходный код приложения.
  • components/ — отдельные компоненты интерфейса.
  • routes/ — модули для маршрутизации.
  • index.js — точка входа приложения.
  • public/index.html — основной HTML-шаблон.

Конфигурация сборщика

Preact CLI автоматически настраивает Webpack для разработки и продакшена, включая:

  • Транспиляцию JSX в JavaScript с помощью Babel.
  • Поддержку ES6+ модулей.
  • Минификацию и оптимизацию кода для продакшен-сборки.
  • Автоматическую перезагрузку при изменении файлов (Hot Module Replacement).

Для проектов, созданных без CLI, требуется ручная настройка Webpack и Babel. В таком случае необходимо:

  1. Установить Webpack и плагины:
npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
  1. Настроить файл webpack.config.js с указанием точки входа, выходного файла и правил обработки JSX.
  2. Создать .babelrc для конфигурации Babel:
{
  "presets": ["@babel/preset-env", ["@babel/preset-react", {"pragma":"h"}]]
}

Ключ pragma: "h" необходим для корректной работы JSX с Preact, поскольку вместо React.createElement используется h.

Подготовка редактора к работе с Preact

Для повышения производительности разработки рекомендуется настроить редактор:

  • Подсветка JSX и TypeScript.
  • Линтер (ESLint) с поддержкой правил Preact:
npm install eslint eslint-plugin-preact --save-dev
  • Форматирование кода с помощью Prettier:
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

Эти инструменты обеспечивают единый стиль кода, автоматическое исправление ошибок синтаксиса и предупреждений о потенциальных проблемах.

Проверка готовности системы

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

npm run dev

Если приложение корректно открывается в браузере по адресу http://localhost:8080, все компоненты системы установлены правильно и подготовка завершена.

Оглавление