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

Библиотека Cash представляет собой легковесную альтернативу jQuery, предназначенную для работы с DOM в современных браузерах. Основное преимущество — минимальный размер и высокая скорость выполнения типичных операций с элементами страницы.

Для подключения Cash доступны несколько способов:

Через npm:

npm install cash-dom

После установки подключение в проекте на ES6 выглядит так:

import $ from 'cash-dom';

Для проектов на CommonJS используется:

const $ = require('cash-dom');

Через CDN:

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

Выбор сборщика и интеграция

Cash можно интегрировать практически с любым современным сборщиком модулей:

Webpack

Webpack поддерживает ES-модули, поэтому подключение через import $ from 'cash-dom' осуществляется без дополнительных настроек. Для проектов с Babel рекомендуется убедиться, что установлен пресет @babel/preset-env для поддержки всех нужных функций JavaScript.

Пример конфигурации:

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

Vite

Vite автоматически обрабатывает ES-модули и поддерживает hot-reload. Подключение Cash через import $ from 'cash-dom' работает без дополнительной настройки. Достаточно указать файл входа в vite.config.js:

import { defineConfig } from 'vite';

export default defineConfig({
  root: './src',
  build: {
    outDir: '../dist'
  }
});

Parcel

Parcel позволяет использовать Cash напрямую через npm:

npm install cash-dom

Parcel автоматически распознаёт ES-модули, поэтому подключение идентично Webpack:

import $ from 'cash-dom';

Особенности интеграции с TypeScript

Для корректной работы с TypeScript рекомендуется установить типы:

npm install --save-dev @types/cash-dom

Это обеспечит подсказки типов, автодополнение и проверку на этапе компиляции. После установки можно использовать Cash точно так же, как и в Jav * aScript:

import $ from 'cash-dom';

$('.button').on('click', () => {
  console.log('Клик обработан');
});

Настройка сборки для минимизации размера

Cash имеет небольшой размер, но при сборке важно исключить лишние зависимости. В Webpack можно использовать tree-shaking, чтобы исключить неиспользуемые функции:

import { ajax, addClass } from 'cash-dom';

Таким образом, в финальный бандл попадут только необходимые методы.

Интеграция с современными фреймворками

Cash может использоваться совместно с React, Vue или Svelte для выполнения низкоуровневых операций с DOM:

Пример с React:

import React, { useEffect } from 'react';
import $ from 'cash-dom';

export default function App() {
  useEffect(() => {
    $('.highlight').addClass('active');
  }, []);

  return 
Текст
;
}

В Vue или Svelte подход аналогичен: Cash вызывается внутри lifecycle hooks (mounted для Vue, onMount для Svelte), чтобы обеспечить безопасное обращение к DOM после его рендеринга.

Совместимость с ES-модулями и CommonJS

Cash поддерживает оба стандарта. При использовании ES-модулей достаточно import $ from 'cash-dom'. Для CommonJS — const $ = require('cash-dom'). Такая универсальность облегчает миграцию проектов с jQuery на Cash без полной переработки сборки.

Оптимизация загрузки

Для проектов с большим количеством скриптов рекомендуется:

  • Подключать Cash через модульную систему сборщика, чтобы избежать глобального пространства имен.
  • Использовать lazy-loading для частей кода, где Cash нужен не сразу.
  • Минимизировать финальный бандл через Terser или встроенные плагины сборщика.
Оглавление