Конфликт JQuery на Rails

Мой application.js:

//= require rails-ujs
//= require jquery
//= require activestorage
//= require turbolinks
//= require bootstrap-sprockets
//= require flatpickr.min
//= require_tree .

мой Gemfile:

gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'bootstrap-sass'
gem 'jquery-rails'

Если я просто оставлю свое приложение таким образом, все мои jQuery будут работать нормально. Но мне тоже нужно

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"</script>
</head>

на моем application.html.erb так как я использую Bootstrap 4.

Так что с этой конфигурацией у меня много проблем с моим jQuery, как

$(...).flatpickr не является функцией

Есть ли способ избежать этих конфликтов? Я полагаю, это потому, что я включаю несколько jQueries в свое приложение.

Если я удалю //= require jquery все связанные с Bootstrap jQuery будут работать, но мои пользовательские скрипты не будут работать.
Если я удалю <script src="https://code.jquery.com/jquery-3.3.1.min.js"</script> мои сценарии будут работать, но не все связанные с Bootstrap (например, гамбургер navbar или аналогичные).

Источник

1 ответ

Решение

Вот шаги, чтобы добавить bootstrap 4 в ваше приложение rails 5, здесь есть ссылки на rubygems и страницы github.

Шаг 1: Добавьте bootstrap и jquery-rails в ваш Gemfile(убедитесь, что sprockets-rails по крайней мере v2.3.2)

gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'

Шаг 2: Добавьте зависимости Bootstrap и Bootstrap в ваш application.js

//= require jquery3
//= require popper
//= require bootstrap

Вам не нужно указывать cdn jquery для ваших представлений, который является функцией строки //= require jquery3. И удалите свою зависимость bootstrap-sass, которая предназначена для bootstrap 3

Примечание: важно отметить, что вам нужно требовать jquery3 с // = require jquery3

Источник
Другие вопросы по тегам