Laravel - 在 app.js 中导入包后，Lightgallery js 未从刀片文件初始化

Question

我在我的项目中使用了lightgallery并使用npm 命令安装了包，之后，我在 app.js 文件中导入了包文件（JS 和 CSS），如下所示：

import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-thumbnail.css';

现在我已经在<div id="inline-gallery-container" class="inline-gallery-container"></div>在dashboard.blade.php文件中创建了<div id="inline-gallery-container" class="inline-gallery-container"></div> 。

之后，我将以下代码放在app.js文件中：

const lgContainer = document.getElementById("inline-gallery-container");
        const inlineGallery = lightGallery(lgContainer, {
            container: lgContainer,
            dynamic: true,
            hash: false,
            closable: false,
            showMaximizeIcon: true,
            appendSubHtmlTo: ".lg-item",
            slideDelay: 400,
            plugins: [lgZoom, lgThumbnail],
            dynamicEl: [
                {
                    src:
                        "https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80",
                    responsive:
                        "https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80",
                    thumb:
                        "https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80",
                    subHtml: `<div class="lightGallery-captions">
                            <h4>Photo by <a href="https://unsplash.com/@dann">Dan</a></h4>
                            <p>Published on November 13, 2018</p>
                        </div>`
                },
                {
                    src:
                        "https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80",
                    responsive:
                        "https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=480&q=80 480, https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80 800",
                    thumb:
                        "https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80",
                    subHtml: `<div class="lightGallery-captions">
                            <h4>Photo by <a href="https://unsplash.com/@kylepyt">Kyle Peyton</a></h4>
                            <p>Published on September 14, 2016</p>
                        </div>`
                },
            ],
            thumbWidth: 60,
            thumbHeight: "40px",
            thumbMargin: 4
        });
        inlineGallery.openGallery();

现在将上面的 js 代码放在app.js文件中，它可以正常工作，但是当我将代码移动到dashboard.blade.php文件时，它给了我这个错误：

Uncaught ReferenceError: lightGallery is not defined

我真的不知道如何解决这个问题。

Answer 1

首先，您需要确保将导入放在正确的位置（例如 app.css / app.js）。 根据我的经验，如果您希望全局访问某个函数/类，则需要将其分配给app.js 中的窗口。

您可能还需要将字体复制到您的公共目录。

资源/js/app.js

import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'

window.lightGallery = lightGallery;
window.lgThumbnail = lgThumbnail;
window.lgZoom = lgThumbnail;

资源/css/app.css

@import '~lightgallery/css/lightgallery-bundle.css';

webpack.mix.js

mix.copyDirectory("node_modules/lightgallery/fonts", "public/fonts");