Конфигурация сборщиков

Atomico — это современная библиотека для разработки веб-компонентов на JavaScript с реактивным подходом, поддерживающая интеграцию с различными сборщиками и инструментами разработки. Эффективная работа с Atomico требует понимания того, как настраиваются сборщики, обеспечивающие компиляцию и бандлинг компонентов, а также оптимизацию для браузеров.

Настройка Vite

Vite является рекомендуемым инструментом для сборки проектов с Atomico благодаря высокой скорости и поддержке современных стандартов JavaScript.

Основные моменты настройки:

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

    npm install vite @atomico/cli --save-dev

    @atomico/cli обеспечивает интеграцию с Vite и оптимизацию веб-компонентов.

  2. Конфигурация vite.config.js Важные параметры включают:

    • build.lib — режим сборки библиотеки.
    • rollupOptions — управление входными точками и внешними зависимостями.

    Пример:

    import { defineConfig } from 'vite';
import { atomico } from '@atomico/cli/vite';

export default defineConfig({
    plugins: [atomico()],
    build: {
        lib: {
            entry: 'src/index.js',
            name: 'MyComponents',
            fileName: (format) => `my-components.${format}.js`,
        },
        rollupOptions: {
            external: ['lit', 'react'],
            output: {
                globals: {
                    lit: 'Lit',
                    react: 'React'
                }
            }
        }
    }
});

  3. Особенности разработки

    • atomico() автоматически обрабатывает .jsx и .tsx файлы, создавая оптимизированные веб-компоненты.
    • Горячая перезагрузка (HMR) работает без дополнительной настройки.

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

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

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

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

  2. Конфигурация Webpack (webpack.config.js) Включает обработку JSX и модульную сборку:

    const path = require('path');

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

  3. Оптимизация

    • Включение mode: 'production' автоматически включает минимизацию и tree-shaking.
    • Внешние зависимости можно указать через externals, чтобы исключить их из финального бандла.

Работа с Rollup

Rollup обеспечивает более тонкую настройку библиотек Atomico, особенно при публикации npm-пакетов:

  1. Установка Rollup

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

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

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

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/my-components.js',
        format: 'esm',
    },
    plugins: [
        resolve(),
        babel({ babelHelpers: 'bundled', presets: ['@babel/preset-env'] })
    ],
    external: ['react', 'lit']
};

  3. Особенности

    • Rollup обеспечивает компактные ES-модули, что особенно важно для веб-компонентов, загружаемых по сети.
    • Плагин @rollup/plugin-babel позволяет использовать современные возможности JavaScript, сохраняя совместимость с более старыми браузерами.

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

Ключевые методы улучшения производительности:

  • Tree-shaking — удаляет неиспользуемый код из финального бандла. Atomico активно поддерживает этот подход за счет модульной структуры компонентов.
  • Code splitting — разделение кода на части, которые загружаются по необходимости, ускоряет первый рендер.
  • Минификация и компрессия — использование Terser или встроенных средств сборщиков уменьшает размер файлов.
  • Внешние зависимости — исключение крупных библиотек из бандла снижает время загрузки.

Совместимость с TypeScript

Atomico полностью поддерживает TypeScript, что важно для крупных проектов:

  • Конфигурация сборщика должна учитывать расширения .ts и .tsx.
  • Для Vite используется встроенный плагин @vitejs/plugin-vue (аналогично для Atomico) или настройка esbuild.
  • Для Webpack требуется добавить ts-loader или babel-loader с поддержкой TypeScript.
// Пример для Webpack
module: {
    rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        },
    ],
},
resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
}

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

Вывод

Правильная конфигурация сборщиков является фундаментом стабильной и производительной работы с Atomico. Использование Vite, Webpack или Rollup позволяет гибко настраивать сборку, оптимизировать производительность и интегрировать современные возможности JavaScript и TypeScript. Эффективная работа с внешними зависимостями, минимизация и разделение кода создают быстрые и модульные веб-компоненты, готовые к использованию в любых веб-приложениях.

Оглавление