让 Jquery 和 Bootstrap 与 Rails 一起工作 6

Question

我是 rails 的新手，正在努力让 Jquery 和 Bootstrap 与 Rails 6 一起工作。我认为这与切换应用程序从 rails 5 到 rails 6，并使用 webpacker 加载 Jquery 而不是将其加载为 gem。我已经完成了这方面的说明，但它似乎仍然无法正常工作。有人帮我解决了一个更具体的问题，并让我将其粘贴到视图中，然后似乎可以正常工作：

<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 我在 header 中包含以下内容：

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

Answer 1

我为此苦苦挣扎了好几天，希望我的经验能对你有所帮助:)

首先，您将加载 jQuery 和 Bootstrap 作为 webpack 模块，因此您不需要任何这些：

<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 领域没有用处。

所以，现在您已经将 jQuery 和 Bootstrap js 导入到您的项目中，但您仍然缺少 Bootstrap 样式表。为了导入它，只需将其包含在您的 application.scss 中（我假设您正在使用它，因为您正在使用 import '../stylesheets/application' 导入它）：

# application.scss

@import "~bootstrap/scss/bootstrap";

现在，jQuery 和 Bootstrap 已导入到您的项目中。希望能帮助到你！如果您是 Webpack 的新手（就像我一样），在您完全使用它之前会遇到很多障碍，因为资产管道有很多不同之处。经过几天（如果不是几周）的研究，我已经设法解决了其中的大部分问题，所以请随时查看我的问题历史记录，看看您是否找到了一些有用的答案。

附加信息：

你没有指定，但是如果你要使用Bootstrap的所有js函数，你的项目中也需要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. Also, I've put together a barebones Rails 6 core app with jQuery, Bootstrap and popper.js installed, so feel free to clone into the repo, here: https://github.com/Dijkie85/rails6core.git.

祝你好运！

Answer 2

我用在Rails 6:

#/Gemfile
gem "bootstrap", "~> 5.1"
gem "jquery-rails", "~> 4.4"

#/app/javascript/packs/application.js
...
import 'bootstrap';

和

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

const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
}))

module.exports = environment

让 Jquery 和 Bootstrap 与 Rails 一起工作 6

Getting Jquery and Bootstrap to work with Rails 6

jquery

ruby-on-rails

twitter-bootstrap

webpacker

ruby-on-rails-6