Rails 5 Bootstrap Javascript标签无法使用

Question

我在使用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)

我使用Rails 5.2.4.1和Ruby 2.6.3以及Bootstrap 4.

在我的application.html.erb中，我在body的结尾处有这些javascript标签，但我认为问题一定是出在了Rails 5.2.4.1和Ruby 2.6.3以及Bootstrap 4上。

<%= javascript_include_tag 'application' %>

<%= javascript_pack_tag 'application' %>

但我认为问题一定出在标签或文件上，因为当我直接将这些Bootstrap脚本标签添加到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/[email protected]/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文件时，我就可以使用assets管道把它们放在文件夹里。

这是我的assetsjavascriptsapplication.js。

//= require rails-ujs
//= require_tree .

还有我的javascriptpacksapplication.js:

import "bootstrap";

这是我的configwebpackenvironment.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

我使用的是 乐华新兵训练营制作的设计模板。 而且对所有东西如何交互还没有信心。所以这里是它生成的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

我是不是忘了包含任何其他可能影响到它的文件？希望有人能在这里发现一个简单的问题，但如果我漏掉了什么，很乐意添加更多信息。这真的让我很不爽。

先谢谢你了

Answer 1

这不是一个好主意，有 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";