我在这里回答了类似的问题： https://stackoverflow.com/a/58794513/12104222

在这里，我解释了如何使用yarn将jquery，bootstrap和popper.js包含到项目中，然后介绍了两种不同的方法来实际导入库（或模块）以在您的应用程序中使用它们，具体取决于是否需要将模块显示为全局插件（可能只需要jQuery和类似的全局库）或作为单个导入（最常见的选项，以Bootstrap为例）。

根据OP的要求，更新了有关甜味剂和图库的说明：

1. 运行$ yarn sweetalert lightgallery lg-thumbnail（或您可能需要的任何插件；如果需要特定版本的插件，也可以使用yarn sweetalert@2.1.2，依此类推）。这会将模块安装在您的node_modules目录中，并使它们可用于Webpacker。 您还将还需要$ yarn jquery来将jquery安装为节点模块。
2. 编辑您的config / webpack / environment.js，使其看起来像这样：

# Some other previous code

environment.plugins.append('Provide',new webpack.ProvidePlugin({
    $: 'jquery',jQuery: 'jquery'
  })
)

module.exports = environment

这将确保jQuery暴露给依赖它的所有其他插件。

1. 编辑app / javascript / packs / application.js，使其看起来像这样：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
//require("jquery") //commented as you loaded jQuery before.

import '../stylesheets/style'
import './default.js' 
import './bootstrap_custom.js'
import './side_menu.js.erb'
import swal from 'sweetalert' //Note you don't need './' in your path if you import via yarn
import 'lightgallery'
import './business_hours.js'
import './admin.js'
import './services.js'
import './user_service.js'

1. 将lightGallery.css导入您的application.scss

2. 从您的视图中删除这些行，因为您将使用webpack加载它们：

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/js/lightgallery.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lg-thumbnail/1.1.0/lg-thumbnail.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

到目前为止，您已经安装了jQuery，lightgallery和sweetalert作为webpack模块。但是，我不能保证这会在您的情况下起作用，因为您提供的代码看起来像是从许多不同的源（Webpack，CDN，也许还有链轮）中导入了许多不同的插件，这可能（可能会）导致他们。 如果可能，我建议您使用正确的webpack导入方法替换每个<script>标签，该方法仅遵循我为您在此答案中提到的插件描述的方法，但应将其应用于其他库/插件

编辑2： 请记住，如果您使用Turbolinks（看起来像您一样），则需要替换这种代码：

$(document).ready(function() {
        $("#lightgallery").lightGallery(); 
    });

与此：

$(document).on('turbolinks:load',function() {
        $("#lightgallery").lightGallery(); 
    });

祝你好运！