Курс по JavaScript от Хекслет

Создание своей сборки Bootstrap 5 из исходных кодов

Александр Мальцев
Александр Мальцев
1,6K
2
Создание своей сборки Bootstrap 5 из исходных кодов
Содержание:
  1. 1. Скачивание исходных файлов Bootstrap 5
  2. 2. Установка npm-пакетов
  3. 3. Настройка Bootstrap 5
  4. 4. Компиляция исходных кодов
  5. Комментарии

В этой статье мы рассмотрим как осуществляется работа с исходными кодами Bootstrap 5, а также как используя их создать свою сборку с нужными настройками и компонентами.

Все действия по созданию своей сборки из исходных кодов Bootstrap 5 можно выделить в 4 основные группы.

1. Скачивание исходных файлов Bootstrap 5

Скачать исходные коды нужной версии Bootstrap можно очень просто, например с GitHub. Для этого заходим в раздел «Releases» этого проекта, выбираем необходимую версию, например, 5.1.3, и нажимаем на ссылку «Source code (zip)».

Релизы фреймворка Bootstrap, предназначенного для построения адаптивных веб-интерфейсов

После загрузки архива распаковываем его в нужное место:

Директория на локальном компьютере, в которую мы распаковали архив Bootstrap 5, содержащий исходные коды этого инструмента

2. Установка npm-пакетов

Для удобной работы и редактирования файлов проекта откроем его, например в текстовом редакторе Visual Studio Code.

Перед тем как переходить дальше, проверьте, установлена ли у вас программа «Node.js». Эта программа включает в себя пакетный менеджер npm, который необходим нам для установки зависимостей, перечисленных в «package.json».

Для установки все необходимых npm-пакетов, откроем терминал и введём команду npm install:

Открытие проекта Bootstrap 5 в текстовом редакторе Visual Studio Code и запуск команды для установки необходимых npm-пакетов

3. Настройка Bootstrap 5

Исходные коды CSS в инструменте Bootstrap 5 написаны на препроцессоре SCSS. При этом весь код разделен на файлы, которые расположены в папке scss/.

SCSS-файлы фреймворка Bootstrap 5

Здесь каждый SCSS-файл отвечает за стилизацию какого-то определённого компонента этого фреймворка или используется для решение другой конкретной задачи. Обычно изменения дефолтных стилей Bootstrap 5 осуществляется посредством переопределения значений SCSS-переменных, которые здесь все собраны в одном файле «_variables.scss»:

Изменение дефолтных стилей Bootstrap 5 посредством редактирования значений SCSS-переменных

Кроме этого, если какие-то компоненты не нужны, то их можно исключить из сборки. Это позволит значительно уменьшить размер финальных CSS и JavaScript файлов, и, следовательно, увеличить скорость загрузки сайта, где этот фреймворк будет применяться.

Например, чтобы исключить из dist/ компонент «Carousel», его нужно закомментировать как в «bootstrap.scss», так и в «index.umd.js» (или в «index.esm.js», если будете использовать ESM-версию Bootstrap 5). Это необходимо делать в двух файлах, так как он написан с использованием SCSS и JavaScript.

Отключение SCSS файла компонента Carousel из build в инструменте Bootstrap 5 Отключение JavaScript файла компонента Carousel из build в инструменте Bootstrap 5

Некоторые компоненты или модули Bootstrap 5 написаны только с помощью SCSS (без JavaScript). В этом случае нужно закомментировать или удалить только импорт соответствующих SCSS-файлов.

4. Компиляция исходных кодов

В Bootstrap 5 компиляция исходных кодов выполняется с помощью npm-скриптов. Они определены в файле «package.json» и предназначены не только для компиляции CSS и JavaScript, но также для решения других задач.

Список npm-скриптов:

  • npm start – компилирует CSS и JavaScript, создает документацию и запускает локальный сервер;
  • npm run dist – создает папку «dist/» с скомпилированными файлами;
  • npm test – запускает тесты;
  • npm run docs-serve – создаёт документацию и запускает её посредством локального сервера.

После настройки Bootstrap 5, выполним компиляцию исходных кодов. Для этого наберем в терминале команду npm run dist:

Выполняем компиляцию исходных кодов Bootstrap 5 путем запуска команды npm-run-dist

После этого в папке dist/ будут созданы CSS и JavaScript файлы, которые будут включать только нужные компоненты и модули системы, а также иметь указанные настройки.

В итоге, в проект достаточно будет скопировать только два файла: «bootstrap.min.css» и «bootstrap.bundle.min.js». «bootstrap.bundle.min.js» – это «bootstrap.min.js», включающий в себя библиотеку «popper.js».

Пример подключения файлов к странице:

<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<script src="/assets/js/bootstrap.bundle.min.js" defer></script>

Комментарии: 2

  1. Иван
    Иван
    2022-07-12 18:47:21
    Класс! Этой статьи мне и не хватало

    P.s. только бы хотелось хотя бы краткого разъяснения чем ESM-версия отличается от не-ESM
  1. Александр Мальцев
    Александр Мальцев
    2022-07-14 14:08:46
    Рад что понравилась!
    Не ESM-версия – это обычная версия Bootstrap, которая не позволяет использовать Bootstrap как модуль в браузере. Иными словами, это обычные js-файлы, в которых не присутствует слово esm в названии файла и которые подключаются как обычно:
    <script src="/assets/js/bootstrap.bundle.js"></script>
    ESM-версия – это совсем другая версия Bootstrap, которая позволяет вам её использовать в качестве модуля. То есть это совсем иной подход к написанию кода на JavaScript. Чтобы в этом разобраться желательно прочитать про ES6 модули в JavaScript, тогда станет всё понятно.
    В этом случае код обычно представляется в виде большого количества файлов (модулей). В случае с Bootstrap, для того, чтобы эти переменные (Bootstrap компоненты), объявленные в JavaScript файле можно было использовать в других ваших файлах (модулях) они из этого файла экспортируются посредством ключевого слова export:
    // ...
    export { Alert, Button, Carousel, Collapse, Dropdown, Modal, Offcanvas, Popover, ScrollSpy, Tab, Toast, Tooltip };
    В свою очередь в своих файлах или прямо на странице, чтобы их использовать вам необходимо эти переменные импортировать с помощью ключевого слова import:
    <script type="module">
      import { Toast } from 'bootstrap.esm.min.js'
    
      Array.from(document.querySelectorAll('.toast'))
        .forEach(el => new Toast(el))
    </script>