Методы установки через npm и yarn

Preact — это легковесная альтернатива React, обеспечивающая высокую производительность и совместимость с экосистемой React. Для работы с Preact необходимо правильно настроить проект, включая установку зависимостей через npm или Yarn.

Установка через npm

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

  1. Создание нового проекта с Preact CLI
npx preact create default my-project
cd my-project
npm install
  • npx preact create default my-project создаёт шаблон проекта с настройками Preact.
  • После перехода в папку проекта выполняется установка всех зависимостей командой npm install.
  1. Установка Preact в существующий проект

Для добавления Preact в уже существующий проект выполняется команда:

npm install preact

При необходимости использования JSX и современных возможностей Preact рекомендуется установить также сопутствующие пакеты:

npm install preact preact-hooks preact-router
  • preact-hooks предоставляет функциональные хуки аналогично React.
  • preact-router позволяет организовать маршрутизацию внутри приложения.
  1. Использование Preact как замены React

Для проектов, ранее использующих React, можно выполнить aliasing:

npm install preact preact-compat

И в конфигурации сборщика (например, Webpack) указать замену:

resolve: {
  alias: {
    'react': 'preact/compat',
    'react-dom': 'preact/compat'
  }
}

Это позволяет использовать Preact без изменения существующего кода на React.

Установка через Yarn

Yarn — альтернативный менеджер пакетов, обеспечивающий более быстрые и детерминированные сборки. Установка Preact через Yarn аналогична npm, с небольшими отличиями в синтаксисе.

  1. Создание нового проекта через Preact CLI
yarn create preact-app my-project
cd my-project
yarn install
  • yarn create preact-app автоматически создаёт проект с базовой структурой и устанавливает все зависимости.
  1. Добавление Preact в существующий проект
yarn add preact

Для поддержки хуков и маршрутизации:

yarn add preact preact-hooks preact-router
  1. Использование Preact вместо React
yarn add preact preact-compat

С настройкой alias в сборщике:

resolve: {
  alias: {
    'react': 'preact/compat',
    'react-dom': 'preact/compat'
  }
}

Различия между npm и Yarn при установке Preact

  • Файлы блокировки зависимостей: npm использует package-lock.json, Yarn — yarn.lock. Оба файла фиксируют версии пакетов для детерминированной установки.
  • Скорость установки: Yarn обычно быстрее при повторной установке пакетов, благодаря кэшированию.
  • Команды установки: npm использует install и i, Yarn — add.
  • Совместимость с Preact CLI: CLI корректно работает с обоими менеджерами без дополнительных настроек.

Рекомендации по структуре проекта после установки

  • Создавать отдельные папки для компонентов (/components) и страниц (/pages) для упрощения навигации.
  • Подключать Preact Hooks через import { useState, useEffect } from 'preact/hooks'.
  • Для маршрутизации использовать preact-router и настроить базовые маршруты:
import { Router } from 'preact-router';
import Home from './pages/Home';
import About from './pages/About';

<Router>
  <Home path="/" />
  <About path="/about" />
</Router>
  • Проверять совместимость с существующими пакетами React, если выполняется миграция на Preact через preact/compat.

Установка через npm или Yarn является ключевым этапом подготовки проекта на Preact, обеспечивая правильную структуру зависимостей, возможность использования современных функций фреймворка и бесшовную интеграцию с экосистемой React.

Оглавление