Webpack настройка

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

Начальная установка включает следующие шаги:

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

Babel используется для трансформации современного JavaScript и JSX-синтаксиса, который Atomico применяет в своих компонентах.

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

Файл .babelrc должен содержать следующие настройки:

{
  "presets": [
    ["@babel/preset-env", { "targets": "defaults" }],
    "@babel/preset-react"
  ],
  "plugins": []
}

Важно: Atomico использует JSX-подобный синтаксис для создания элементов, поэтому @babel/preset-react необходим, даже если React не используется напрямую.

Настройка Webpack

Создается файл webpack.config.js с базовой конфигурацией:

const path = require('path');

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

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

  • entry указывает на основной файл проекта, содержащий компоненты Atomico.
  • babel-loader трансформирует JSX и современный JavaScript в код, совместимый с большинством браузеров.
  • resolve.extensions позволяет импортировать файлы без указания расширения .js.

Подключение CSS и стилей

Atomico поддерживает Shadow DOM, что требует отдельного подхода к стилям. Для Webpack необходимо добавить style-loader и css-loader:

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

Конфигурация модулей:

module: {
  rules: [
    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}

Особенности работы со стилями в Atomico:

  • Стили можно инкапсулировать внутри компонента с помощью Shadow DOM.
  • CSS-файлы могут быть импортированы прямо в JavaScript-компоненты: import './button.css';.

Работа с Hot Module Replacement (HMR)

Для быстрого прототипирования полезно включить HMR:

npm install --save-dev webpack-dev-server

Webpack конфигурация:

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

HMR обеспечивает:

  • Мгновенную перезагрузку компонентов при изменении исходного кода.
  • Сохранение состояния приложения без полной перезагрузки страницы.

Оптимизация сборки для продакшена

Для production-сборки используется минификация и разделение кода:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    splitChunks: {
      chunks: 'all'
    }
  }
};

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

  • Снижение размера финального бандла.
  • Поддержка ленивой загрузки компонентов через динамический import().
  • Разделение сторонних библиотек в отдельные чанки для кэширования браузером.

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

Atomico полностью совместим с TypeScript. Для этого необходимо:

npm install --save-dev typescript ts-loader

Webpack конфигурация:

module: {
  rules: [
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: 'ts-loader'
    }
  ]
},
resolve: {
  extensions: ['.ts', '.tsx', '.js']
}

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

  • Типизация компонентов помогает избежать ошибок при передаче свойств (props).
  • Поддержка tsx позволяет использовать JSX-синтаксис вместе с типами TypeScript.

Динамическая загрузка компонентов

Atomico хорошо работает с динамическим импортом:

const Button = async () => await import('./components/button.js');

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

Совместимость с Web Components

Atomico создает нативные Custom Elements, поэтому:

  • babel-loader должен сохранять современный синтаксис ES Modules.
  • Webpack поддерживает tree-shaking, исключая неиспользуемый код.
  • В HTML достаточно подключить бандл и использовать <my-component></my-component>.

Итоговая структура проекта

/project
  /src
    index.js
    /components
      button.js
      card.js
    /styles
      main.css
  /dist
    bundle.js
  webpack.config.js
  package.json
  .babelrc

Такое расположение файлов обеспечивает чистую архитектуру и совместимость с Webpack, поддерживая все возможности Atomico: реактивность, Shadow DOM и динамическую загрузку.

Оглавление