Bootstrap 5 удалит jQuery как зависимость. Это хорошая новость 👏! Но если вы хотите удалить зависимость прямо сейчас, вы можете сделать это с помощью bootstrap.native.

bootstrap.native — это сторонний плагин, который идеально имитирует Bootstrap с ванильным JavaScript. Он легкий, прочный и имеет несколько приятных улучшений.

Начните с bootstrap.native

Установить через пряжу:

yarn add bootstrap.native bootstrap.native-loader

Как вы уже догадались, bootstrap.native-loader — это загрузчик Webpack.

Вернемся к коду, настроим загрузчик в Webpacker — укажем компоненты, которые хотим использовать, и версию. bootstrap.native поддерживает как V3, так и V4.

// config/webpack/environment.js
const { environment } = require("@rails/webpacker")
const webpack = require("webpack")

environment.loaders.append("bootstrap.native", {
  test: /bootstrap\.native/,
  use: {
    loader: "bootstrap.native-loader",
    options: {
      only: ["alert", "button", "dropdown", "modal", "tooltip"],
      bsVersion: 4
    }
  }
})

module.exports = environment

Затем импортируйте его в файл записи Webpack.

import "bootstrap.native"

Важно отметить, что все компоненты инициализируются сразу. Это означает, что он будет сканировать атрибуты data-* и инициализировать раскрывающиеся списки, всплывающие подсказки и т. д. Если у вас есть правильная HTML-разметка Bootstrap, вам больше ничего не нужно делать.

Но если вы используете Turbolinks…

Вам понадобится это:

// app/javascript/packs/application.js
import "bootstrap.native"
document.addEventListener("turbolinks:load", () => {
  BSN.initCallback(document.body)
})

Как поясняется в Ем FAQ, динамически добавляемые элементы работать не будут.

Работает ли это с добавленными позже элементами?
…прослушиватели событий, используемые компонентами, не привязаны к документу и делегированы конкретным элементам, как это делают подключаемые модули jQuery. подход, более ориентированный на производительность, и решил привязать события к самим элементам из соображений производительности.

Поскольку Turbolinks извлекает новую страницу и заменяет тело, события не будут работать после перехода по ссылке, созданной Turbolink.

Поэтому нам нужно указать bootstrap.native (глобальная переменная BSN) для повторной инициализации событий после события turbolinks:load. Вы можете узнать больше об этой части из официальной вики и этого Stackoverflow.

сладкий data-persist

По сравнению с официальным JavaScript, bootstrap.native содержит несколько приятных улучшений.

Мне больше всего нравится вариант data-persist, который держит раскрывающееся меню открытым, идеальный вариант использования формы в раскрывающемся списке. (Ранее мне пришлось добавить небольшой хак, чтобы заставить Bootstrap работать таким образом.)

Разметка проста — добавьте data-persist="true" в раскрывающуюся кнопку.

<button class="dropdown-toggle" data-toggle="dropdown" data-persist="true">

Подробнее: Некоторые функции стали еще лучше.

Разное: ESLint, очистка

Если вы используете ESLint, обязательно добавьте BSN к глобальным переменным:

// .eslintrc.json
{
 "globals": {
    "BSN": false,
    // ...
  }
}

Наконец, с радостью попрощайтесь с этими старыми приятелями 👋 (или даже с jQuery, если Bootstrap последний от него зависит!).

yarn remove bootstrap popper.js

Вывод

Перейдем к плюсам и минусам.

Плюсы

  • отлично работает, как рекламируется
  • легкий, 5кб
  • в хорошем состоянии
  • быстро догнать вверх по течению (например, функция тоста)
  • почти готовое решение

Соотношение открытия и закрытия выпусков Github составляет 1/205! 👏

Минусы

Будучи сторонним ремеслом, он неизбежно вводит ..

  • некоторые способы обучения и подсказки
  • задержки наверстывания вверх по течению

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

Я очень доволен переходом на bootstrap.native. В целом, меньше кода, меньший размер пакета и один большой шаг к полному отказу от зависимости от jQuery. 💪

p.s. Если вы используете React, тоже есть прекрасное решение: React Bootstrap.

p.p.s. Если вы хотите узнать, как использовать компонент Toast с bootstrap.native, ознакомьтесь с продолжением.

Первоначально опубликовано на bloggie.io.