使Jquery和Bootstrap与Rails 6一起使用 [英] Getting Jquery and Bootstrap to work with Rails 6

问题描述

我是Rails的新手，正在努力使Jquery和Bootstrap与Rails 6一起使用.我认为这与将应用程序从Rails 5切换到Rails 6以及使用webpacker加载Jquery而不是将其作为一颗宝石.我已经按照说明进行了操作，但是似乎仍然无法正常工作.有人帮助我解决了一个更具体的问题，然后让我将其粘贴到视图中，然后似乎使它起作用:

I am a new to rails and struggling to get Jquery and Bootstrap to work with Rails 6. I think it has something to do with switching the app from rails 5 to rails 6 and using webpacker to load Jquery rather than loading it as a gem. I have gone through the instructions for this however it still doesn't seem to work properly. Someone helped me with a more specific problem and got me to paste this into the view which then seemed to make it work:

<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的副本:

However, this feels like a workaround and I want Jquery available in all views. Below is a copy of /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:

and /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("...")的旧式表示法吗?

I don't get the difference between Require("...") and //= require ...? is the //= a legacy notation that should be converted to Require("...")?

我同时需要require("jquery")和//= require jquery3吗?我认为不是.如果是这样，我应该删除哪一个?

Also do I need both require("jquery") and //= require jquery3? I assume not. If so which one should I delete?

在/apps/views/layouts/Application.html.erb中，标头中包含以下内容:

In /apps/views/layouts/Application.html.erb I have the following contained within the header:

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

推荐答案

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

I struggled with this for days, so hopefully my experience will help you :)

首先，您将把jQuery和Bootstrap作为webpack模块加载，因此您不需要以下任何一项:

First of all, you will be loading jQuery and Bootstrap as a webpack module, so you don't need any of this:

<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安装模块:

Instead, you want to install the modules using yarn on your prompt:

$ yarn add jquery bootstrap

在那之后，您应该将jQuery导入到您的项目中.最安全的方法是编辑/config/webpack/environment.js，方法与您以前的方法大致相同:

After that, you should import jQuery into your project. The safest way to do it is editing your /config/webpack/environment.js, much in the way you did:

...
environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
...

现在，由于您要将jQuery作为webpack全局插件导入(即在所有视图中甚至从其他模块中都可用)，因此您应该不再次在app/javascript/packs/application.js，因为这是导致意外行为的已知原因.但是，您确实希望在该文件中导入Bootstrap.所以它应该像这样:

Now, since you're importing jQuery as a webpack global plugin (that is, available throughout all your views, and even from other modules), then you should not import it again in your app/javascript/packs/application.js, as this is a known cause for unexpected behavior. In that file you do want, however, to import Bootstrap. So it should look like this:

# 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("")语法更受欢迎.而且您肯定不想使用以下任何一种方法:

Note that I'm using the import 'module' syntax, which is preferred over the older require("") syntax. And you definitely don't want to use any of these:

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

它们是Sprockets(资产管道)指令，在Webpack-land中没有用.

They're Sprockets (asset pipeline) directives with no use in Webpack-land.

因此，到目前为止，您已经将jQuery和Bootstrap js都导入到您的项目中，但是您仍然缺少Bootstrap样式表.为了导入它，只需将其包括在您的application.scss中(假定您正在使用import '../stylesheets/application'导入它，我假设您正在使用它):

So, by now you have both jQuery and Bootstrap js imported into your project, but you're still missing Bootstrap stylesheet. In order to import it, just include this in your application.scss (which I assume you're using given you're importing it with import '../stylesheets/application'):

# application.scss

@import "~bootstrap/scss/bootstrap";

您已经将jQuery和Bootstrap导入到您的项目中.希望能帮助到你！如果您不熟悉Webpack(就我而言)，则在充分使用Webpack之前会遇到很多障碍，因为资产管道存在很多差异.经过几天(如果不是几周)的研究，我已经设法处理了其中大部分问题，因此随时查看我的问题历史记录，看看您是否找到了一些有用的答案.

And there you are, jQuery and Bootstrap imported into your project. Hope it helps! If you're new to Webpack (as I am) you will encounter lots of obstacles before you can fully use it, since there are a lot of differences with the asset pipeline. After several days (if not weeks) of research I've managed to deal with most of them, so feel free to look into my question history to see if you find some useful answers.

其他信息:

1. 您没有指定它，但是如果要使用所有Bootstrap的js函数，则在项目中还需要Popper.js.为了安装，只需在命令行中运行$ yarn add popper.js，然后编辑/config/webpack/environment.js，使其如下所示:

1. You didn't specify it, but if you're going to use all of Bootstrap's js functions, you'll also need Popper.js in your project. In order to install just run $ yarn add popper.js in your command line, and edit your /config/webpack/environment.js so it looks like this:

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

1. 最后，我试图以最简洁的方式回答您的问题，但是如果您仍在挣扎，则可能需要查看更多分步教程，例如:

1. Lastly, I tried to answer your question in the most concise way I could, but if you're still struggling, you may want to check some more step-by-step tutorials, like this: 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.

祝你好运！

这篇关于使Jquery和Bootstrap与Rails 6一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！