Настройка сборщиков

Slim.js — это современная библиотека для создания веб-компонентов с минимальным объёмом кода и высокой производительностью. Для полноценной работы проектов на Slim.js крайне важно правильно настроить сборщик, поскольку он обеспечивает трансформацию исходного кода, поддержку модулей и оптимизацию для продакшена. На практике чаще всего используются сборщики на основе Webpack, Vite или Rollup, каждый из которых обладает своими особенностями интеграции с Slim.js.

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

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

project/
│
├─ src/
│  ├─ components/
│  │  └─ my-component.js
│  └─ index.js
│
├─ public/
│  └─ index.html
│
├─ package.json
└─ vite.config.js (или webpack.config.js)
  • src/components/ — директория для Slim-компонентов.
  • src/index.js — точка входа приложения.
  • public/ — статические ресурсы, доступные напрямую.

Настройка Vite для Slim.js

Vite обеспечивает быструю сборку и встроенный HMR (Hot Module Replacement), что особенно удобно при разработке компонентов Slim.js.

Установка зависимостей:

npm install vite @vitejs/plugin-legacy
npm install slim-js

Конфигурация vite.config.js:

import { defineConfig } from 'vite';

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    rollupOptions: {
      input: 'src/index.js',
      output: {
        format: 'esm',
      },
    },
  },
  server: {
    port: 3000,
    open: true
  }
});

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

  • root указывает корневую папку исходного кода.
  • build.outDir задаёт директорию для готовой сборки.
  • rollupOptions.output.format: 'esm' важен для корректной работы ES-модулей, на которых построен Slim.js.

Настройка Webpack для Slim.js

Webpack позволяет гибко управлять загрузкой модулей и поддерживает разнообразные плагины для оптимизации.

Установка зависимостей:

npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env slim-js --save-dev

Конфигурация webpack.config.js:

const path = require('path');

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

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

  • Babel обеспечивает транспиляцию современного JS-кода, необходимого для Slim.js, в совместимый с большинством браузеров.
  • devServer.hot активирует горячую замену модулей для компонентов.

Использование Rollup

Rollup особенно эффективен для сборки библиотек на Slim.js, так как создаёт минимальный размер итогового файла.

Установка:

npm install rollup @rollup/plugin-node-resolve @rollup/plugin-babel rollup-plugin-terser slim-js --save-dev

Конфигурация rollup.config.js:

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

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
    sourcemap: true
  },
  plugins: [
    resolve(),
    babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }),
    terser()
  ]
};

Примечания:

  • resolve() позволяет Rollup находить зависимости в node_modules.
  • babel() транспилирует код Slim.js для старых браузеров.
  • terser() минимизирует итоговый файл, снижая вес страницы.

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

Для крупных проектов на Slim.js рекомендуется:

  • Разделять код на отдельные чанки (code splitting), особенно при использовании Vite или Webpack.
  • Включать Tree Shaking, чтобы исключить неиспользуемые функции из сборки.
  • Генерировать source maps для удобного дебага компонентов.
  • Использовать кэширование сборщика при частых изменениях кода для ускорения компиляции.

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

Slim.js компоненты подключаются как ES-модули:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Slim.js Example</title>
</head>
<body>
  <my-component></my-component>
  <script type="module" src="./dist/bundle.js"></script>
</body>
</html>

Важно использовать атрибут type="module" для корректной работы ES-модулей после сборки.

Поддержка TypeScript

Slim.js полностью совместим с TypeScript. Для интеграции достаточно добавить tsconfig.json и подключить соответствующий загрузчик в сборщик:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

Сборщики, такие как Vite и Webpack, автоматически обрабатывают .ts файлы при использовании плагинов @vitejs/plugin-vue или ts-loader соответственно.

Настройка сборщика в Slim.js определяет скорость разработки и производительность финального продукта. Корректная интеграция с Webpack, Vite или Rollup позволяет максимально использовать преимущества библиотеки и минимизировать количество ручных шагов при работе с компонентами.

Оглавление