Установка через npm

Umbrella JS — это легкая библиотека для работы с DOM, предоставляющая удобный синтаксис для манипуляций с элементами, обработчиков событий, работы с классами, атрибутами и AJAX-запросами. Для полноценного использования всех возможностей библиотеки рекомендуется установка через менеджер пакетов npm, что обеспечивает удобное управление зависимостями и интеграцию с современными сборщиками, такими как Webpack, Vite или Parcel.

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

Перед установкой Umbrella JS необходимо создать и инициализировать проект Node.js. Это выполняется с помощью команды:

npm init -y

Опция -y автоматически подтверждает все стандартные настройки, создавая файл package.json с базовыми параметрами проекта.

Установка Umbrella JS

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

npm install @umbrellajs/umbrella --save

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

  • @umbrellajs/umbrella — официальное название пакета в npm.
  • Флаг --save добавляет зависимость в package.json в раздел dependencies, что гарантирует её установку при переносе проекта на другой компьютер.

После успешного выполнения команды в директории проекта появится папка node_modules с библиотекой, а также обновится package.json.

Подключение Umbrella JS в проект

После установки библиотеку можно импортировать в JavaScript-файлы. Существует два основных способа:

  1. ES6 модули:
import u from '@umbrellajs/umbrella';

u('div').addClass('active');
  • import u from '@umbrellajs/umbrella'; — импорт функции выбора элементов.
  • u('div') возвращает объект Umbrella, поддерживающий цепочку методов для работы с DOM.
  1. CommonJS (Node.js):
const u = require('@umbrellajs/umbrella');

u('p').text('Пример текста');
  • Используется в проектах с настройкой Node.js и сборщиками, поддерживающими CommonJS.
  • Позволяет интегрировать библиотеку без использования транспайлеров.

Проверка корректности установки

Для проверки правильности установки достаточно создать тестовый файл index.js с минимальным кодом:

import u from '@umbrellajs/umbrella';

document.addEventListener('DOMContentLoaded', () => {
    u('body').append('<p>Umbrella JS подключен!</p>');
});

Затем выполнить сборку или запуск через Node.js с использованием сборщика. Если в HTML-файле появится новый абзац, установка выполнена корректно.

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

Umbrella JS полностью совместима с современными сборщиками:

  • Webpack:
// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    }
};
  • Vite:
// vite.config.js
import { defineConfig } from 'vite';

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

После настройки сборщика Umbrella JS можно использовать как любой модуль ES6, а дерево зависимостей будет корректно включено в финальный бандл.

Преимущества установки через npm

  • Управление версиями: можно легко обновлять библиотеку через npm update.
  • Совместимость с модульной системой: прямое использование ES6 или CommonJS импорта.
  • Интеграция с сборщиками и транспайлерами: минимизирует ручное подключение скриптов в HTML.
  • Автоматическое подключение зависимостей: нет необходимости хранить локальные копии библиотеки.

Возможные ошибки при установке

  1. Ошибка MODULE_NOT_FOUND — возникает при неправильном пути импорта или отсутствии библиотеки в node_modules. Решение: выполнить npm install @umbrellajs/umbrella.
  2. Конфликты версий — при использовании других библиотек с похожими именами или глобальных установок. Решение: проверить package.json и удалить лишние версии.
  3. Проблемы с сборщиком — при неправильной конфигурации Webpack или Vite. Решение: убедиться, что файлы .js обрабатываются через соответствующие лоадеры или плагины.

Практические рекомендации

  • Для крупных проектов рекомендуется фиксировать версию библиотеки в package.json с помощью символа ^ или ~, чтобы избежать неожиданных изменений API при обновлениях.
  • Использование import вместо <script> в HTML повышает модульность и позволяет применять tree-shaking для уменьшения размера финального бандла.
  • Регулярно проверять документацию Umbrella JS для актуальных методов и новых возможностей.
Оглавление