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

Pikaday распространяется как отдельный пакет и может быть установлен через менеджер пакетов npm. Такой способ установки считается стандартным для современных JavaScript-проектов, поскольку позволяет управлять версиями зависимостей, автоматически подключать библиотеку в систему сборки и упрощает обновление кода.

Установка через npm особенно востребована при использовании инструментов сборки, таких как Webpack, Vite, Rollup, Parcel и других решений для разработки клиентских приложений.

Предварительные требования

Перед установкой необходимо наличие следующих компонентов:

  • установленный Node.js;
  • менеджер пакетов npm (поставляется вместе с Node.js);
  • созданный JavaScript-проект с файлом package.json.

Проверка доступности Node.js и npm выполняется командами:

node -v
npm -v

Если команды возвращают номера версий, среда готова к работе.

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

Если проект ещё не содержит файла package.json, его можно создать с помощью команды:

npm init -y

После выполнения будет сформирован базовый конфигурационный файл проекта:

{
  "name": "my-project",
  "version": "1.0.0"
}

Файл package.json становится центральной точкой управления зависимостями приложения.

Установка Pikaday

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

npm install pikaday

После завершения процесса пакет будет загружен в каталог:

node_modules/

Также в файле package.json появится запись:

{
  "dependencies": {
    "pikaday": "^1.8.2"
  }
}

Точная версия может отличаться в зависимости от момента установки.

Структура установленного пакета

После установки в каталоге пакета обычно присутствуют следующие файлы:

node_modules/
└── pikaday/
    ├── pikaday.js
    ├── pikaday.css
    ├── plugins/
    ├── README.md
    └── package.json

Наиболее важными являются:

Файл Назначение
pikaday.js Основной JavaScript-код библиотеки
pikaday.css Стандартные стили календаря
package.json Метаданные пакета
plugins/ Дополнительные расширения

Импорт библиотеки

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

ES Modules

Современный вариант подключения:

import Pikaday from 'pikaday';

Создание экземпляра календаря:

import Pikaday from 'pikaday';

const picker = new Pikaday({
    field: document.getElementById('datepicker')
});

CommonJS

Для проектов на Node.js или старых конфигураций сборщиков используется синтаксис:

const Pikaday = require('pikaday');

Пример:

const Pikaday = require('pikaday');

const picker = new Pikaday({
    field: document.getElementById('datepicker')
});

Подключение CSS через npm

Установка пакета через npm не означает автоматическое подключение стилей. Файл CSS необходимо импортировать отдельно.

В проектах с поддержкой импорта стилей:

import 'pikaday/css/pikaday.css';

Полный пример:

import Pikaday from 'pikaday';
import 'pikaday/css/pikaday.css';

const picker = new Pikaday({
    field: document.getElementById('datepicker')
});

После сборки стили попадут в итоговый бандл приложения.

Использование с Vite

Vite поддерживает работу с npm-пакетами без дополнительной настройки.

Установка:

npm install pikaday

Подключение:

import Pikaday from 'pikaday';
import 'pikaday/css/pikaday.css';

new Pikaday({
    field: document.querySelector('#date')
});

Пример HTML:

<input id="date">

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

Использование с Webpack

В проектах на Webpack пакет устанавливается стандартным способом:

npm install pikaday

Подключение в модуле:

import Pikaday from 'pikaday';
import 'pikaday/css/pikaday.css';

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

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

Пример настройки:

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
};

После сборки Webpack автоматически включит стили Pikaday в результирующий пакет приложения.

Использование с Rollup

Установка:

npm install pikaday

Импорт:

import Pikaday from 'pikaday';

Для работы со стилями часто используются плагины:

npm install rollup-plugin-postcss --save-dev

Конфигурация может выглядеть следующим образом:

import postcss from 'rollup-plugin-postcss';

export default {
    plugins: [
        postcss()
    ]
};

После этого становится возможным импортировать CSS непосредственно в JavaScript-коде.

Установка определённой версии

Для фиксации конкретного релиза используется указание номера версии:

npm install pikaday@1.8.0

Запись в зависимостях будет выглядеть следующим образом:

{
    "dependencies": {
        "pikaday": "1.8.0"
    }
}

Фиксация версии полезна при поддержке крупных проектов, где важно обеспечить предсказуемое поведение приложения.

Установка как devDependency

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

В таком случае применяется команда:

npm install pikaday --save-dev

Запись будет помещена в раздел:

{
    "devDependencies": {
        "pikaday": "^1.8.2"
    }
}

Однако для большинства веб-приложений Pikaday является частью пользовательского интерфейса, поэтому обычно устанавливается как обычная зависимость (dependencies).

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

Проверить наличие пакета можно несколькими способами.

Через npm:

npm list pikaday

Пример результата:

my-project
└── pikaday@1.8.2

Через файл зависимостей:

{
    "dependencies": {
        "pikaday": "^1.8.2"
    }
}

Через импорт в приложении:

import Pikaday from 'pikaday';

console.log(Pikaday);

Если проект успешно собирается и ошибки отсутствуют, установка выполнена корректно.

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

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

npm update pikaday

Либо выполняется повторная установка конкретного релиза:

npm install pikaday@latest

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

Удаление пакета

При необходимости пакет удаляется следующим образом:

npm uninstall pikaday

Команда выполняет несколько действий одновременно:

  • удаляет пакет из каталога node_modules;
  • удаляет запись из package.json;
  • обновляет файл блокировки зависимостей.

После удаления импорт библиотеки становится недоступным:

import Pikaday from 'pikaday';

Попытка использования такого кода приведёт к ошибке сборки или выполнения.

Типичный сценарий установки и подключения

Полный цикл интеграции Pikaday через npm обычно выглядит следующим образом:

Установка:

npm install pikaday

Подключение:

import Pikaday from 'pikaday';
import 'pikaday/css/pikaday.css';

Создание поля ввода:

<input id="birthday">

Инициализация календаря:

new Pikaday({
    field: document.getElementById('birthday'),
    format: 'DD.MM.YYYY'
});

После сборки проекта пользователь получает готовый интерактивный календарь выбора даты, установленный и подключённый через инфраструктуру npm.

Оглавление