将工作jQuery转换为Laravel Mix/WebPack下的函数

我刚刚开始为一个现有项目使用LaravelMix，该项目以前只有一个静态JS文件，其中包含我自己的jquery代码和一些粘贴的库。其中一个库用于一个名为lity的灯箱。然而，这个问题是相当普遍的，它并不是真正的关系。我认为将JS集成到Web包中有一些一般原则，我不太理解

场景

所以我现在使用Mix，我有一个JS文件，里面有我自己的随机代码，我还包括我需要的最新官方JS库（通过npm）

Ie我在我的JS文件中添加以下行，以包括我通过npm安装的库

lity = require('lity');

我就快到了，但是我之前在文档中的以下代码。ready（）代码不起作用，因为它似乎无法引用对象

我的自定义JS文件顶部仍然存在的问题代码如下

$(document).ready(function() {
    lity.handlers('', function(target, instance) {
        // for specific page urls I add a class to the lity container
        if ( target.indexOf('/page1')>-1 || target.indexOf('/page-name2')>-1 ) {
            instance.element().find('.lity-container').addClass("lity-resize450");
        }
        return lity.iframe(target, instance);
    });
});

错误

当JS编译时（没有错误），我在运行时得到以下信息

app.js?20200217:62 Uncaught TypeError: lity.iframe is not a function
    at app.js?20200217:62
    at Function.<anonymous> (app.js?20200217:13561)
    at Function.each (app.js?20200217:2612)
    at factory (app.js?20200217:13548)
    at new Lity (app.js?20200217:13661)
    at lity (app.js?20200217:13724)
    at HTMLSpanElement.<anonymous> (app.js?20200217:461)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.v.handle (jquery.min.js:2)

app.js？20200217:62未捕获类型错误：lity.iframe不是函数
在app.js？20200217:62
在功能上。（附录js？20200217:13561）
在Function.each（app.js？20200217:2612）
在工厂（app.js？20200217:13548）
在纽约（app.js？20200217:13661）
在美国（app.js？20200217:13724）
在HTMLSPANENT。（附录js？20200217:461）
在HTMLDocument.dispatch（jquery.min.js:2）
位于HTMLDocument.v.handle（jquery.min.js:2）

---

因此，似乎无法以某种方式访问该功能。。那么这有什么不对呢？有人知道吗？

我想你不能从函数调用iframe，因为它是在处理程序中定义的

var _defaultOptions = {
        esc: true,
        handler: null,
        handlers: {
            image: imageHandler,
            inline: inlineHandler,
            youtube: youtubeHandler,
            vimeo: vimeoHandler,
            googlemaps: googlemapsHandler,
            facebookvideo: facebookvideoHandler,
            iframe: iframeHandler
        },
       ...
    };

因此，您可以尝试用这种方式调用iframe函数

$(document).ready(function() {
    lity.handlers('', function(target, instance) {
        // for specific page urls I add a class to the lity container
        if ( target.indexOf('/page1')>-1 || target.indexOf('/page-name2')>-1 ) {
            instance.element().find('.lity-container').addClass("lity-resize450");
        }
        return this.iframe(target, instance);
    });
});

---

如果此方法不适用于您，请告诉我。

在您的网页包中添加lity别名

mix.webpackConfig（{resolve:{alias:{'lity'：path.join（{dirname，'node_modules/lity/src/lity'）}）我不知道我是否理解错了描述，你的webpack.mix.js中有require（）吗？