Webpack

SkateJS — это легковесная библиотека для создания веб-компонентов на основе нативного API Custom Elements. Для эффективной работы в современных проектах она часто интегрируется с Webpack, что позволяет собирать компоненты, использовать модульную структуру и оптимизировать код.

Подготовка проекта

Создается стандартная структура проекта:

/project
  /src
    index.js
    /components
      my-button.js
  package.json
  webpack.config.js

Устанавливаются необходимые зависимости:

npm install skatejs lit-html webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env --save-dev

skatejs — основная библиотека.
lit-html — используется для шаблонов в компонентах.
webpack и webpack-cli — для сборки проекта.
webpack-dev-server — для локальной разработки.
babel-loader и пресеты — для транспиляции современного JavaScript.

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

Создается webpack.config.js:

const path = require('path');

module.exports = {
  mode: 'development',
  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']
          }
        }
      }
    ]
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

entry указывает точку входа.
output задает имя и путь для итогового бандла.
module.rules настраивает обработку JS через Babel.
devServer обеспечивает быстрый просмотр изменений при разработке.

Создание компонента на SkateJS

Компоненты создаются через функцию define и класс, наследующий Skate.Component. Пример кнопки:

import { define, h, Component } from 'skatejs';

class MyButton extends Component {
  static get props() {
    return {
      label: String
    };
  }

  render() {
    return h('button', { onclick: () => alert('Clicked!') }, this.label || 'Click me');
  }
}

define(MyButton);

props описывает свойства компонента.
render возвращает виртуальный DOM через функцию h.
define регистрирует компонент в браузере.

Использование в проекте

В index.js:

import './components/my-button.js';

const app = document.createElement('div');
app.innerHTML = `
  <my-button label="Нажми меня"></my-button>
`;
document.body.appendChild(app);

Сборка через Webpack создаст единый файл bundle.js, который подключается в index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>SkateJS + Webpack</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

Интеграция стилей

Webpack позволяет импортировать CSS напрямую в JS. Для этого устанавливаются загрузчики:

npm install style-loader css-loader --save-dev

Добавляется правило в webpack.config.js:

{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader']
}

Пример использования:

import './components/my-button.css';

Модули и оптимизация

SkateJS поддерживает модульную структуру: каждый компонент отдельным файлом.
Webpack позволяет использовать code splitting, чтобы загружать компоненты по необходимости.
Для продакшн-сборки рекомендуется включать mode: 'production' и минификацию через TerserPlugin.

Горячая перезагрузка

Webpack Dev Server обеспечивает Hot Module Replacement (HMR):

devServer: {
  static: path.resolve(__dirname, 'dist'),
  hot: true,
  port: 9000
}

Это ускоряет разработку, обновляя компоненты без полной перезагрузки страницы.

Особенности работы SkateJS с Webpack

SkateJS работает как с ES-модулями, так и с CommonJS.
Поддерживаются шаблоны через h или lit-html.
Webpack позволяет удобно собирать компоненты в один бандл, подключать стили и ассеты, оптимизировать размер.