Настройка сборщиков: Webpack, Vite, Rollup

Основы интеграции Preact с сборщиками

Preact — это легковесная альтернатива React, полностью совместимая с его API, но с минимальным размером. Для эффективной работы с Preact важно правильно настроить сборщик, чтобы получить быструю сборку, поддержку JSX и оптимизацию кода для продакшна. Основные сборщики, используемые с Preact: Webpack, Vite и Rollup. Каждый из них требует специфической конфигурации.

Webpack

Установка и базовая конфигурация

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

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react preact

Важным моментом является настройка babel-loader для поддержки JSX и синтаксиса ES6+. Используется пресет @babel/preset-react с указанием pragma для Preact:

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom': 'preact/compat'
    }
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-react', { pragma: 'h' }],
              '@babel/preset-env'
            ]
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    static: './dist',
    hot: true,
  }
};

Особенности Webpack с Preact

  • alias для React позволяет использовать существующие React-библиотеки без изменений.
  • babel-loader с указанием pragma: 'h' необходим для корректного преобразования JSX в вызовы Preact.
  • Для продакшн-сборки стоит использовать TerserPlugin для минификации кода и DefinePlugin для замены process.env.NODE_ENV.

Vite

Быстрый старт и простота конфигурации

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

npm install vite @vitejs/plugin-react preact

Конфигурация Vite для Preact

// vite.config.js
import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

export default defineConfig({
  plugins: [preact()],
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom': 'preact/compat'
    }
  }
});

Особенности Vite

  • Мгновенная перезагрузка модулей (HMR) за счет использования нативных ES-модулей.
  • Минимальная конфигурация по сравнению с Webpack.
  • Плагины позволяют легко интегрировать TypeScript, PostCSS и другие инструменты.

Rollup

Оптимизация для библиотек и маленьких проектов

Rollup часто используется для сборки библиотек благодаря эффективной tree-shaking оптимизации. Для Preact потребуется подключить плагины для JSX и Node-модулей:

npm install rollup @rollup/plugin-node-resolve @rollup/plugin-babel @rollup/plugin-commonjs preact

Конфигурация Rollup

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true,
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**',
      presets: [
        ['@babel/preset-react', { pragma: 'h' }],
        '@babel/preset-env'
      ]
    }),
    terser()
  ]
};

Особенности Rollup

  • Tree-shaking удаляет неиспользуемый код, что особенно важно для небольших библиотек.
  • Плагин @rollup/plugin-node-resolve позволяет использовать сторонние модули из node_modules.
  • babel с pragma: 'h' обеспечивает правильное преобразование JSX для Preact.

Сравнительный анализ

Сборщик Подходит для Основные преимущества Сложности
Webpack Большие SPA проекты Гибкая конфигурация, экосистема плагинов Сложная настройка
Vite Быстрые проекты, prototyping Мгновенная сборка, простота Меньше возможностей плагинов для старых браузеров
Rollup Библиотеки, оптимизация Малый размер сборки, tree-shaking Не так хорошо подходит для SPA с большим количеством файлов

Рекомендации по выбору

  • Для крупных SPA и проектов с множеством зависимостей — Webpack.
  • Для разработки с акцентом на скорость и простоту конфигурации — Vite.
  • Для библиотек и оптимизации размера финального бандла — Rollup.

Практические советы

  • Всегда использовать preact/compat, если планируется использование сторонних React-библиотек.
  • Настроить babel-loader или babel с pragma: 'h' для правильного рендеринга JSX.
  • Для продакшн-сборки включать минификацию и удаление неиспользуемого кода.
  • Проверять поддержку Source Maps для упрощения отладки.
Оглавление