Rails 6 Webpack JQuery Yarn - Bootstrap 汉堡菜单不工作的问题

如何解决Rails 6 Webpack JQuery Yarn - Bootstrap 汉堡菜单不工作的问题

所以我试图将一个外部的 html/css 设计项目包含到一个使用 webpack 的 Rails 6 应用程序中。我已经删除了 Turbolinks（实际上 turbolinks 仍然添加到 heroku 应用程序中，但即使没有它我们仍然遇到同样的问题）认为让它正常工作可能更容易，然后我会在工作后重新添加它。

我无法让 bootstrap hamburger 按钮工作（也就是 jQuery 看起来不像是在它上面被调用），此外我看不到任何动画的工作方式与外部模板动画的工作方式类似。我会添加链接进行比较。我添加了一些控制台日志，以使用 application.js 仔细检查所有 js 文件是否以正确的顺序加载，它们似乎确实如此。

我已经向页面添加了一个 jQuery 警报脚本，它运行正常，但汉堡菜单的其他动画都不起作用。我已经为此绞尽脑汁了一段时间，因此将不胜感激。我已将我所拥有的内容添加到 heroku 以帮助识别任何差异。感谢一百万。

application.js 文件

// This file is automatically compiled by Webpack,along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

//import 'bootstrap';
//import '../stylesheets/application'


require("@rails/ujs").start();
// require("turbolinks").start();
require("@rails/activestorage").start();
require("@rails/actiontext");
require("channels");

var jQuery = require("jquery");
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;

require("bootstrap");



import flatpickr from "flatpickr"
require("flatpickr/dist/flatpickr.css")

document.addEventListener("turbolinks:load",() => {
  flatpickr("[date-behaviour='flatpickr]",{
    altInput: true,altFormat: "F j,Y",dateFormat: "Y-m-d",})
})


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images',true)
// const imagePath = (name) => images(name,true)


require("packs/custom/jquery.min")
require("packs/custom/bootstrap.bundle.min")
require("packs/custom/owl.carousel.min")
require("packs/custom/waypoints.min")
require("packs/custom/jquery.counterup.min")
require("packs/custom/TweenMax.min")
require("packs/custom/wow")
require("packs/custom/jquery.magnific-popup.min")
require("packs/custom/jquery.ajaxchimp.min")
require("packs/custom/swiper.min")
require("packs/custom/typed-2.0.11")
require("packs/custom/vegas.min")
require("packs/custom/jquery.validate.min")
require("packs/custom/bootstrap-select.min")
require("packs/custom/countdown.min")
require("packs/custom/jquery.mCustomScrollbar.concat.min")
require("packs/custom/bootstrap-datepicker.min")
require("packs/custom/nouislider.min")
require("packs/custom/isotope")
require("packs/custom/theme")
require("packs/custom/index")

environment.js 文件

const { environment } = require('@rails/webpacker')

module.exports = environment

package.json 文件

{
  "name": "touristy","private": true,"dependencies": {
    "@rails/actioncable": "^6.0.0","@rails/actiontext": "^6.0.3-1","@rails/activestorage": "^6.0.0","@rails/ujs": "^6.0.0","@rails/webpacker": "4.2.2","bootstrap": "^4.5.0","expose-loader": "^1.0.3","flatpickr": "^4.6.9","jquery": "^3.5.1","jquery-mousewheel": "^3.1.13","owl.carousel": "^2.3.4","popper.js": "^1.16.1","trix": "^1.2.0"
  },"version": "0.1.0","devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

在控制台中，您将在 Applications.js 中的每个文件上看到控制台警报

应用程序是：https://calm-sea-98150.herokuapp.com/

主题页面：Tripo Theme

是否是 package.json 文件的问题 - 我看到 bootstrap 在列表中高于 jQuery（我需要重新排序吗？）

我也可以说我用 Yarn 调用引导程序可能会发生冲突，但也将它作为包/自定义文件夹中的外部 js 文件，这是否正确

我对 webpack 还很陌生，但我觉得看完 Chris from GoRails explain it

只是不确定我现在加载 js 文件的地方出了什么问题？它们看起来像是在控制台中加载，但在页面加载时没有执行任何操作。

提前致谢:)