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)

我正在使用带有 Ruby 2.6.3 和 Bootstrap 4 的 Rails 5.2.4.1。

在我的 application.html.erb 中，我在正文的末尾有这些 javascript 标签：

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

我正在使用Devise template made by the LeWagon bootcamp，但我还不确定一切是如何交互的。因此，这是它为安全措施而生成的 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";