将工作的jQuery转换为Laravel Mix / WebPack下的功能

Question

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

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

我将下面的行添加到我的JS文件中，以包含我通过npm安装的jquery库。

lity = require('lity');

我几乎在那里，但然后下面的代码，我以前在我的document.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)

所以，似乎是不可接近的……那么这有什么问题呢?有谁知道吗?

Answer 1

我认为你不能从属性函数调用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);
});
});

如果这个方法不适合你，请告诉我。