[英]Bootstrap & Rails 6 (no webpack) - Default bootstrap javascript not working
[英]Rails 5 Bootstrap Javascript Tags Not Working
我在使用 Bootstrap 4 和 Rails 5 javascript 标签时遇到了奇怪的问题。 当我开始这个项目并且我没有对任何 js 进行任何更改时,一切似乎都运行良好,但突然我的可折叠导航栏下拉菜单停止运行,我可以在控制台中看到这些错误:
GET http://localhost:3000/packs/js/application-48ce69a491950ec17b29.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/packs/js/application-48ce69a491950ec17b29.js net::ERR_ABORTED 404 (Not Found)
我正在使用带有 Ruby 2.6.3 和 Bootstrap 4 的 Rails 5.2.4.1。
在我的 application.html.erb 中,我在正文末尾有这些 javascript 标签:
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
但我认为问题必须包含在标签或文件中,因为当我直接将这些引导脚本标签添加到 application.html 我的下拉菜单再次开始工作:
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
所以这真的让我很困惑,我想确保 include_tag 和 pack_tag 确实在工作,这样当我需要更多时,我可以使用资产管道将其他 js 文件组织在文件夹中。
这是我的资产/javascripts/application.js:
//= require rails-ujs
//= require_tree .
还有我的 javascript/packs/application.js:
import "bootstrap";
这是我的 config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
// Preventing Babel from transpiling NodeModules packages
environment.loaders.delete('nodeModules');
// Bootstrap 4 has a dependency over jQuery & Popper.js:
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
我正在使用LeWagon 训练营制作的 Devise 模板,但我对一切如何交互尚无信心。 因此,这是它为安全措施而生成的 gemfile:
source 'https://rubygems.org'
ruby '2.6.3'
gem 'bootsnap', require: false
gem 'devise'
gem 'jbuilder', '~> 2.0'
gem 'pg', '~> 0.21'
gem 'puma'
gem 'rails', '5.2.4.1'
gem 'redis'
gem 'autoprefixer-rails'
gem 'font-awesome-sass', '~> 5.12.0'
gem 'sassc-rails'
gem 'simple_form'
gem 'uglifier'
gem 'webpacker'
group :development do
gem 'web-console', '>= 3.3.0'
end
group :development, :test do
gem 'pry-byebug'
gem 'pry-rails'
gem 'listen', '~> 3.0.5'
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
gem 'dotenv-rails'
end
我是否忘记包含可能影响此的任何其他文件? 希望有人能在这里发现一个简单的问题,但如果我错过了什么,很高兴添加更多信息。 这真的让我的山羊哈哈大笑。
提前致谢!
同时拥有javascript_include_tag 'application'
和javascript_pack_tag 'application'
并不是一个好主意
如果您使用 webpacker,则不需要app/assets/javascripts
文件夹
您需要将app/javascript/packs/application.js
更改为如下内容:
require("@rails/ujs").start();
require("@rails/activestorage").start();
require("channels");
require("jquery");
import "bootstrap";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.