我是Rails的新手，正在努力使Jquery和Bootstrap与Rails 6一起使用。我认为这与将应用程序从Rails 5切换到Rails 6以及使用webpacker加载Jquery而不是将其作为gem加载有关。我已经按照说明进行了操作，但是似乎仍然无法正常工作。有人帮助我解决了一个更具体的问题，然后让我将其粘贴到 View 中，然后似乎使它起作用:
<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在所有 View 中均可用。以下是/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' %>
最佳答案
我为此奋斗了好几天，所以希望我的经验能对您有所帮助:)
首先，您将把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全局插件导入(也就是说，可以在所有 View 中使用，甚至可以从其他模块中使用)，因此您应该而不是再次将其导入
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( Assets 管道)指令，在Webpack-land中没有用。
因此，到目前为止，您已经将jQuery和Bootstrap js导入到您的项目中，但是您仍然缺少Bootstrap样式表。为了导入它，只需在
application.scss中添加它(假设您正在使用import '../stylesheets/application'导入它，我就假设您正在使用它):# application.scss
@import "~bootstrap/scss/bootstrap";
在那里，将jQuery和Bootstrap导入到您的项目中。希望能帮助到你!如果您不熟悉Webpack(就我而言)，则在充分使用Webpack之前会遇到很多障碍，因为 Assets 管道存在很多差异。经过几天(如果不是几周)的研究，我设法处理了大部分问题，请随时查看我的问题历史记录，以了解是否找到了一些有用的答案。
附加信息:
$ yarn add popper.js，然后编辑/config/webpack/environment.js，使其看起来像这样:environment.plugins.append('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
祝你好运!
关于jquery - 使Jquery和Bootstrap与Rails 6一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58780725/