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.