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

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

它们是在 Webpack-land 中没有使用的链轮（资产管道）指令。

所以，现在您已经将 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']
  })
)

2. 最后，我尝试以最简洁的方式回答您的问题，但如果您仍然在苦苦挣扎，您可能需要查看更多分步教程，如下所示：https : //medium.com/@ adrian_teh/ruby-on-rails-6-with-webpacker-and-bootstrap-step-by-step-guide-41b52ef4081f。另外，我已经将一个安装了 jQuery、Bootstrap 和 popper.js 的准系统 Rails 6 核心应用程序放在一起，所以可以随意克隆到 repo，这里：https : //github.com/Dijkie85/rails6core.git。

祝你好运！