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

Для интеграции fullPage.js в проект на JavaScript предпочтительным способом является использование пакетного менеджера npm, что позволяет поддерживать проект в актуальном состоянии и удобно управлять зависимостями.

Установка пакета

Для начала необходимо инициализировать npm-проект (если этого ещё не сделано) командой:

npm init -y

Эта команда создаст файл package.json, который будет содержать информацию о проекте и его зависимостях.

Далее устанавливается сам пакет fullpage.js:

npm install fullpage.js --save

Флаг --save указывает, что зависимость должна быть добавлена в package.json в разделе dependencies, что гарантирует её автоматическую установку при развёртывании проекта на других машинах.

Подключение fullPage.js в проект

После установки доступна возможность импортировать библиотеку в ваш JavaScript-код. В зависимости от используемой сборки и синтаксиса модуля это можно сделать двумя способами.

ES6 модули:

import fullpage from 'fullpage.js';
import 'fullpage.js/dist/fullpage.css';

CommonJS (например, для Node.js проектов):

const fullpage = require('fullpage.js');
require('fullpage.js/dist/fullpage.css');

Импорт CSS-файла необходим для корректного отображения анимаций и стилевого оформления секций.

Инициализация fullPage.js

После подключения библиотеки создаётся экземпляр fullPage, передавая ему контейнер и объект конфигурации:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
    scrollingSpeed: 700
});

Ключевые параметры:

  • autoScrolling — включает или отключает автоматическую прокрутку секций.
  • navigation — отображение навигационных точек справа.
  • anchors — задаёт уникальные идентификаторы секций для навигации по URL.
  • sectionsColor — задаёт фон каждой секции.
  • scrollingSpeed — скорость прокрутки в миллисекундах.

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

При использовании современных сборщиков модулей важно правильно настроить загрузку CSS. Для Webpack нужно убедиться, что установлены style-loader и css-loader:

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

Затем в webpack.config.js добавляется правило:

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

Для Vite дополнительных настроек обычно не требуется, достаточно стандартного импорта CSS:

import 'fullpage.js/dist/fullpage.css';

Обновление fullPage.js через npm

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

npm update fullpage.js

Это гарантирует получение последних исправлений и новых возможностей без ручного скачивания файлов.

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

После установки и подключения fullPage.js важно убедиться, что библиотека корректно интегрирована. Достаточно открыть HTML-страницу с контейнером #fullpage и проверить поведение прокрутки. Если секции перелистываются плавно и навигация отображается, установка прошла успешно.

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

  • Управляемые зависимости: все пакеты фиксируются в package.json, упрощая поддержку проекта.
  • Обновления: легко получать новые версии через npm update.
  • Совместимость с сборщиками: полный контроль над импортом JS и CSS через Webpack, Vite, Parcel.
  • Минимизация ошибок: исключается риск использования устаревших скриптов с CDN.

Установка через npm обеспечивает структурированное и масштабируемое подключение fullPage.js, создавая основу для дальнейшей работы с библиотекой в современных JavaScript-проектах.

Оглавление