Получение Jquery и Bootstrap для работы с Rails 6 - PullRequest
Новая
       182

Получение Jquery и Bootstrap для работы с Rails 6

2 голосов
/ 09 ноября 2019

Я новичок в rails и изо всех сил пытаюсь заставить Jquery и Bootstrap работать с Rails 6. Я думаю, что это как-то связано с переключением приложения с rails 5 на rails 6 и использованием веб-упаковщика для загрузки Jquery вместо его загрузки какдрагоценный камень. Я прошел инструкции для этого, однако он все еще не работает должным образом. Кто-то помог мне с более конкретной проблемой и заставил меня вставить это в представление, которое тогда, казалось, заставляло его работать: 

<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>

Однако это похоже на обходной путь, и я хочу, чтобы Jquery был доступен во всех представлениях. Ниже приведена копия /javascript/packs/application.js: 

require("jquery")
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap/dist/js/bootstrap")

import '../stylesheets/application'
import './bootstrap_custom.js'


//= require jquery3
//= require popper
//= require bootstrap-sprockets

и /config/webpack/environment.js:

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

Я не вижу разницы междуRequire("...") и //= require ...? //= - это устаревшая нотация, которую следует преобразовать в Require("...")?

Кроме того, нужны ли мне require("jquery") и //= require jquery3? Я предполагаю, что нет. Если это так, какой из них я должен удалить?

В /apps/views/layouts/Application.html.erb у меня в заголовке содержится следующее: 

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

1 Ответ

2 голосов
/ 11 ноября 2019

Я боролся с этим в течение нескольких дней, так что, надеюсь, мой опыт поможет вам:)

Прежде всего, вы будете загружать 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 (как и я), вы столкнетесь с множеством препятствий, прежде чем сможете полностью его использовать, поскольку существует множество различий с конвейером ресурсов. После нескольких дней (если не недель) исследований мне удалось справиться с большинством из них, так что не стесняйтесь заглядывать в мою историю вопросов, чтобы найти полезные ответы.

Дополнительная информация:

  1. Вы не указали его, но если вы собираетесь использовать все функции 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.

Удачи!

...