让 Jquery 和 Bootstrap 与 Rails 6 配合使用

我是 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("...") and //= require ...？是个//=应转换为的遗留符号Require("...")?

我也需要两者吗require("jquery") and //= 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' %>

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

首先，您将加载 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 全局插件导入（即在所有视图中可用，甚至从其他模块中可用），那么您应该not再次将其导入到您的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("")句法。而你绝对don't想要使用其中任何一个：

//= 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 的新手（就像我一样），在完全使用它之前你会遇到很多障碍，因为与资产管道有很多差异。经过几天（如果不是几周）的研究，我已经成功解决了其中的大多数问题，因此请随意查看我的问题历史记录，看看是否找到一些有用的答案。

附加信息：

1. 您没有指定它，但如果您要使用 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']
  })
)

1. 最后，我尝试以最简洁的方式回答您的问题，但如果您仍然遇到困难，您可能需要查看更多分步教程，如下所示：https://medium.com/@adrian_teh/ruby-on-rails-6-with-webpacker-and-bootstrap-step-by-step-guide-41b52ef4081f。另外，我还安装了一个准系统 Rails 6 核心应用程序，并安装了 jQuery、Bootstrap 和 popper.js，因此请随意克隆到存储库中，如下所示：https://github.com/Dijkie85/rails6core.git.

祝你好运！