带有主题实现错误的 Rails 6 webpacker

如何解决带有主题实现错误的 Rails 6 webpacker

我正在使用最新版本 6.1.3 和 ruby 版本 2.7.2 创建一个 rails 应用程序。我有一个旧主题，我想将它集成到我的应用程序中。

但不知何故我无法成功集成它。请在下面检查我的错误和集成步骤。

整合

app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"
import "popper.js"
import "bootstrap"
require("./external/imagesloaded.min")
require("./external/isotope.min")
require("./external/simpleLightBox.min")
require("./external/theme")

Rails.start()
Turbolinks.start()
ActiveStorage.start()

所有自定义主题js文件存储在app/javascript/packs/external

app/javascript/packs/external/theme.js

;(function($){
  "use strict"

  /*  Isotope Fillter js */
    console.log("file execute successfully");
    function gallery_isotope(){
    if ( $('.gallery_f_inner').length ){
      // Activate isotope in container
      $(".gallery_f_inner").imagesLoaded( function() {
        $(".gallery_f_inner").isotope({
          layoutMode: 'fitRows',animationoptions: {
            duration: 750,easing: 'linear'
          }
        });
      });

      // Add isotope click function
      $(".gallery_filter li").on('click',function(){
        $(".gallery_filter li").removeClass("active");
        $(this).addClass("active");

        var selector = $(this).attr("data-filter");
        $(".gallery_f_inner").isotope({
          filter: selector,animationoptions: {
            duration: 450,easing: "linear",queue: false,}
        });
        return false;
      });
    }
  }
  setTimeout(() => {
    gallery_isotope();
    $('.imagegallery1 .light').simpleLightBox();
  },800);

  /*  Simple LightBox js */
})(jQuery)

我尝试了 this 解决方案，但我有 7 个自定义 js 文件，每个文件至少包含 16 种不同类型的函数，因此手动转换所有 js 文件非常困难。

请指导我哪里错了，并建议我一个可行的解决方案。提前致谢。