Установка и настройка окружения

SkateJS распространяется через npm-репозиторий и устанавливается как зависимость проекта. В минимальной конфигурации достаточно базового окружения Node.js и менеджера пакетов npm или yarn. SkateJS совместим с современными версиями JavaScript и ориентирован на модульную структуру кода.

npm install skatejs

При использовании yarn установка идентична по смыслу:

yarn add skatejs

После завершения установки в пакете проекта появится директория с исходными модулями SkateJS, доступными для импорта в прикладной код.

Инициализация проекта

Для корректной сборки и модульного импорта SkateJS требуется базовая настройка bundler-инструмента. Наиболее распространённые варианты: Webpack, Rollup, Vite и Parcel. Независимо от выбранного сборщика необходимо обеспечить поддержку ES-модулей, а также разрешение импортов из node_modules.

Пример импорта SkateJS в точке входа проекта:

import { define, props } from 'skatejs';

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

Настройка сборочной конфигурации

Webpack

Для Webpack важна корректная настройка поля module и указание режима сборки. Поддержка ES-модулей обеспечивается правилом обработки файлов .js или .mjs, при необходимости подключается Babel для трансформации кода под нужные версии браузеров.

Минимальная конфигурация:

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

Rollup

Rollup удобен при создании библиотечных пакетов и модульных систем. Поддержка SkateJS обеспечивается через @rollup/plugin-node-resolve и @rollup/plugin-commonjs, чтобы корректно собирать зависимости из npm.

Минимальный пример:

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

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

Vite

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

Babel и трансформация кода

При необходимости поддерживать старые браузеры включается Babel. Необходимо подключить пресет @babel/preset-env с соответствующими целями. SkateJS использует современные возможности языка, что делает трансформацию особенно полезной при наличии требований к совместимости.

Пример .babelrc:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.5%, not dead"
    }]
  ]
}

Среда разработки

Для продуктивной работы удобен локальный сервер с автоматической перезагрузкой. Его обеспечивает Vite или Webpack Dev Server. SkateJS хорошо интегрируется с выбранным инструментом и не накладывает дополнительных требований.

Старт разработки в среде Vite:

npm run dev

После запуска открывается локальный хост с собранным приложением, в котором можно импортировать и тестировать компоненты SkateJS.

Проверка окружения

После завершения установки и настроек стоит создать минимальный компонент на SkateJS и подключить его в DOM. Это позволяет убедиться в корректной работе сборки и правильной обработке импортов.

Пример компонента:

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

class App extends Component {
  static props = {
    title: props.string
  };

  render({ title }) {
    return `<span>${title}</span>`;
  }
}

define('demo-app', App);

Подключение компонента в HTML:

<demo-app title="Hello Skate"></demo-app>

Рендеринг компонента подтверждает рабочее окружение и корректность настройки модульной системы.

Особенности окружения

SkateJS реализует подход с использованием веб-компонентов и нативных возможностей браузера. Это снижает требования к дополнительным фреймворкам и оптимизирует размер итогового бандла. Однако в старых браузерах могут потребоваться полифиллы для API Custom Elements и Shadow DOM. Их рекомендуется подключать через отдельные npm-зависимости или CDN-источники.

Поддержка ESM и модульных импортов — ключевой аспект при настройке окружения. Большинство современных сборщиков удовлетворяют этим требованиям без дополнительной конфигурации.

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

При использовании TypeScript необходимо установить типы и настроить декларации:

npm install --save-dev typescript @types/skatejs

TypeScript-конфигурация (фрагмент):

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "preserve"
  }
}

SkateJS корректно работает с TypeScript-классами и предоставляет строгую типизацию свойств компонентов.

Вывод готового окружения

Корректно установленное и настроенное окружение позволяет создавать компоненты SkateJS, интегрировать их в интерфейсы и компилировать в оптимизированный бандл. Сборщик отвечает за модулейную систему и транспиляцию, а SkateJS — за декларативное описание и поведение веб-компонентов.

Оглавление