Инструменты сборки

Haunted — это библиотека для создания веб-компонентов на основе функциональных компонентов в стиле React. Она минималистична, что делает её гибкой, но требует тщательной настройки инструментов сборки для работы в современных проектах. Понимание того, как интегрировать Haunted с инструментами вроде Vite, Webpack или Rollup, критически важно для производительности и масштабируемости приложений.

Настройка проекта с Haunted

Haunted не накладывает строгих ограничений на структуру проекта. Обычно структура включает следующие папки:

src/
  components/
  utils/
  index.js
public/
  index.html
package.json

Файл index.js является точкой входа. В нём регистрируются веб-компоненты и создаются основные точки монтирования. Для работы с Haunted необходимы следующие зависимости:

"dependencies": {
  "haunted": "^5.0.0"
},
"devDependencies": {
  "vite": "^4.0.0",
  "rollup-plugin-terser": "^7.0.0"
}

Haunted поддерживает современные ES-модули, поэтому сборка должна быть настроена на работу с import и export.

Интеграция с Vite

Vite обеспечивает мгновенную перезагрузку модулей и минимальную конфигурацию. Для Haunted важно включить поддержку веб-компонентов и JSX (если используется).

Пример базового vite.config.js:

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    target: 'esnext',
    rollupOptions: {
      output: {
        format: 'esm'
      }
    }
  }
});

Ключевые моменты:

  • target: 'esnext' позволяет использовать нативные ES-модули без транспиляции.
  • Формат esm обеспечивает корректное подключение компонентов в браузере.

Haunted компоненты можно импортировать напрямую:

import { html, render } from 'haunted';
import './components/my-component.js';

const root = document.getElementById('app');
render(html`<my-component></my-component>`, root);

Работа с Webpack

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

  1. Установка зависимостей:
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev
  1. Конфигурация webpack.config.js:
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

Важно: Haunted использует современные возможности JavaScript, поэтому настройка Babel позволяет корректно транспилировать код для старых браузеров, если это необходимо.

Rollup для библиотечных сборок

Rollup подходит для создания переиспользуемых библиотек на Haunted. Он минимизирует размер и позволяет экспортировать компоненты как ES-модули. Пример rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    resolve(),
    commonjs(),
    terser()
  ]
};

Преимущества:

  • Минификация через terser.
  • Поддержка модулей Node через resolve и commonjs.
  • Возможность экспортировать компоненты как отдельные модули для внешнего использования.

Работа с CSS и шаблонами

Haunted не имеет встроенного CSS-in-JS. Для интеграции стилей применяются стандартные подходы:

  1. Встроенные стили через шаблон html:
import { html, component } from 'haunted';

function myComponent() {
  return html`
    <style>
      p { color: blue; }
    </style>
    <p>Hello Haunted</p>
  `;
}

customElements.define('my-component', component(myComponent));
  1. Использование CSS-модулей или препроцессоров через сборщик. Например, с Vite подключение SCSS:
import './style.scss';

Rollup и Webpack также поддерживают загрузку CSS через соответствующие плагины (rollup-plugin-postcss, css-loader).

Оптимизация сборки

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

  • Code splitting: Разделение кода на чанки с помощью dynamic import() для ленивой загрузки компонентов.
  • Tree shaking: Удаление неиспользуемого кода, поддерживается Rollup и Webpack при ES-модулях.
  • Минификация: Terser или встроенные плагины сборщиков для уменьшения размера итогового файла.

Пример динамической загрузки компонента с Haunted:

const loadComponent = async () => {
  const module = await import('./components/my-component.js');
  document.body.appendChild(document.createElement('my-component'));
};

loadComponent();

Тестирование сборки

После настройки инструментов сборки важно проверить:

  • Корректное отображение компонентов в браузере.
  • Отсутствие ошибок при динамическом импорте.
  • Совместимость с различными браузерами (ESNext может требовать полифилов).

Haunted, будучи легковесной библиотекой, позволяет гибко комбинировать современные инструменты сборки, обеспечивая высокую производительность и модульность проектов.

Оглавление