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

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

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

Перед установкой AutoNumeric необходимо убедиться, что проект инициализирован как npm-пакет. Для этого используется команда:

npm init -y

Она создаёт файл package.json с базовыми настройками проекта. Этот файл управляет зависимостями, скриптами и метаданными проекта, позволяя удобно подключать внешние библиотеки.

Установка AutoNumeric

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

npm install autonumeric --save

Параметр --save добавляет зависимость в секцию dependencies файла package.json, что гарантирует автоматическую установку при развертывании проекта на других машинах. После выполнения команды в проекте появится папка node_modules, содержащая библиотеку AutoNumeric и все её внутренние зависимости.

Импорт в проект

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

ES Modules (ESM):

import AutoNumeric from 'autonumeric';

CommonJS:

const AutoNumeric = require('autonumeric');

Использование ESM предпочтительно в современных проектах, особенно при работе с фреймворками вроде React, Vue или Angular. CommonJS остаётся актуальным для Node.js и старых сборщиков.

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

Для проверки корректной установки можно создать простой HTML-файл с подключением Jav * aScript:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тест AutoNumeric</title>
</head>
<body>
    <input type="text" id="numeric-field" />

    <script type="module">
        import AutoNumeric from './node_modules/autonumeric/dist/autoNumeric.js';

        new AutoNumeric('#numeric-field', {
            currencySymbol: '$',
            decimalPlaces: 2
        });
    </script>
</body>
</html>

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

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

Если проект использует Webpack, Vite или другой современный сборщик, достаточно импортировать AutoNumeric через npm, и сборщик сам включит библиотеку в итоговый бандл. Для Webpack можно также указать правила транспиляции через babel-loader, если требуется поддержка старых браузеров.

import AutoNumeric from 'autonumeric';

const input = document.querySelector('#numeric-field');
new AutoNumeric(input, { decimalPlaces: 2 });

Сборщики автоматически обрабатывают зависимости из node_modules, что устраняет необходимость прямого подключения скриптов через теги <script> в HTML.

Обновление библиотеки

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

npm update autonumeric

Если требуется обновление до конкретной версии, можно воспользоваться:

npm install autonumeric@4.7.0 --save

Версионирование позволяет сохранять совместимость с существующим кодом, предотвращая поломку функционала при обновлениях.

Удаление библиотеки

Для удаления AutoNumeric из проекта применяется команда:

npm uninstall autonumeric --save

Эта команда удаляет библиотеку из node_modules и удаляет запись из dependencies в package.json, что полностью очищает проект от библиотеки.

Резюме по npm-интеграции

  • Инициализация проекта через npm init.
  • Установка библиотеки командой npm install autonumeric.
  • Импорт через import или require в зависимости от системы модулей.
  • Интеграция с современными сборщиками без необходимости отдельного подключения скриптов.
  • Обновление и удаление библиотеки с помощью команд npm update и npm uninstall.

Такой подход обеспечивает удобное управление зависимостями, совместимость с различными средами и прозрачную интеграцию AutoNumeric в любой современный проект на JavaScript.

Оглавление