Я боролся с этим в течение нескольких дней, так что, надеюсь, мой опыт поможет вам:)
Прежде всего, вы будете загружать jQuery и Bootstrap как модуль веб-пакета, поэтому вам не нужно ничего из этого:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Вместо этого вы хотите установить модули, используя yarn
в вашем приглашении:
$ yarn add jquery bootstrap
После этого вы должны импортировать jQuery в ваш проект. Самый безопасный способ сделать это - отредактировать ваш /config/webpack/environment.js, так же, как вы это сделали:
...
environment.plugins.append('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
...
Теперь, так как вы импортируете jQuery как глобальный плагин webpack (то есть(доступно для всех ваших представлений и даже из других модулей), вам следует не импортировать его снова в app/javascript/packs/application.js
, поскольку это известная причина неожиданного поведения. Однако в этом файле вы хотите импортировать Bootstrap. Таким образом, это должно выглядеть так:
# app/javascript/packs/application.js
import 'bootstrap';
import '../stylesheets/application'
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
Обратите внимание, что я использую синтаксис import 'module'
, который предпочтительнее старого синтаксиса require("")
. И вы определенно не хотите использовать любой из них:
//= require jquery3
//= require popper
//= require bootstrap-sprockets
Это директивы Sprockets (конвейер ресурсов), которые не используются в Webpack-land.
Итак, теперь у вас есть jQuery и Bootstrap js, импортированные в ваш проект, но у вас все еще отсутствует таблица стилей Bootstrap. Чтобы импортировать его, просто включите его в ваш application.scss
(который, я полагаю, вы используете, учитывая, что вы импортируете его с помощью import '../stylesheets/application'
):
# application.scss
@import "~bootstrap/scss/bootstrap";
И вот вы, jQuery иBootstrap импортирован в ваш проект. Надеюсь, это поможет! Если вы новичок в Webpack (как и я), вы столкнетесь с множеством препятствий, прежде чем сможете полностью его использовать, поскольку существует множество различий с конвейером ресурсов. После нескольких дней (если не недель) исследований мне удалось справиться с большинством из них, так что не стесняйтесь заглядывать в мою историю вопросов, чтобы найти полезные ответы.
Дополнительная информация:
- Вы не указали его, но если вы собираетесь использовать все функции js Bootstrap, вам также понадобится Popper.js в вашем проекте. Для установки просто запустите
$ yarn add popper.js
в командной строке и отредактируйте ваш /config/webpack/environment.js так, чтобы он выглядел так:
environment.plugins.append('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
Наконец, я попытался ответить на ваш вопрос максимально лаконично, но если вы все еще испытываете затруднения, вы можете проверить еще несколько пошаговых руководств, например:
https://medium.com/@adrian_teh/ruby-on-rails-6-with-webpacker-and-bootstrap-step-by-step-guide-41b52ef4081f.Кроме того, я собрал базовое приложение Rails 6 для barebones с установленными jQuery, Bootstrap и popper.js, поэтому не стесняйтесь клонировать в репозиторий здесь:
https://github.com/Dijkie85/rails6core.git.
Удачи!