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

【问题标题】：Converting working jQuery to function under Laravel Mix / WebPack将工作 jQuery 转换为 Laravel Mix / WebPack 下的函数
【发布时间】：2021-03-10 18:13:23
【问题描述】：

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

场景

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

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

lity = require('lity');

我快到了，但是我之前在 document.ready() 代码中的以下代码不起作用，因为它似乎无法引用 lity 对象。

在我的自定义 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)

因此，似乎无法以某种方式访问 litity。 .. 那么这有什么问题呢？有人有想法吗？

【问题讨论】：

在你的 webpack 中添加 lity 别名 mix.webpackConfig({ resolve: { alias: { 'lity': path.join(__dirname, 'node_modules/lity/src/lity') } } });
不知道是不是我理解的描述有误，你的webpack.mix.js中有require()吗？

标签： webpack laravel-mix

【解决方案1】：

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

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

【讨论】：