带有webpack-encore的ekko-lightbox :无法读取未定义的属性“构造器”

Question

我想用西佛尼的webpack-安可来收录ekko-灯箱.

我在这里创建了一个实用的jsFiddle演示：https://jsfiddle.net/92vq1z2b/。它使用了与我相同版本的引导、jQuery和。

然而，在我的本地Symfony项目中，它不起作用。当我单击"lightboxed“图像时，会在浏览器控制台中得到以下错误：

Uncaught TypeError: Cannot read property 'Constructor' of undefined
at new Lightbox (ekko-lightbox.js:97)
at HTMLAnchorElement.<anonymous> (ekko-lightbox.js:649)
at Function.each (jquery.js:362)
at jQuery.fn.init.each (jquery.js:157)
at jQuery.fn.init._jQueryInterface [as ekkoLightbox] (ekko-lightbox.js:645)
at HTMLAnchorElement.<anonymous> (members.js:8)
at HTMLDocument.dispatch (jquery.js:5206)
at HTMLDocument.elemData.handle (jquery.js:5014)

ekko-lightbox.js的第97行如下：

this._isBootstrap3 = $.fn.modal.Constructor.VERSION[0] == 3;

不知怎么的，webpack-安可似乎把javascript文件搞砸了。但我找不到问题。

我的webpack.config.js看起来是这样的：

// webpack.config.js
// ...
.addEntry('global', './assets/js/global.js')
.addEntry('public', './assets/js/public.js')
.addEntry('members', './assets/js/members.js')
// ...

global.js文件包括引导程序、jQuery等：

// global.js
require('../css/global.scss');

var $ = require('jquery');
require('popper.js');
require('bootstrap');

members.js文件包括ekko：

// members.js
require('../css/members.scss');

require('ekko-lightbox');

$(document).ready(function () {
    $(document).on('click', '[data-toggle="lightbox"]', function (event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    });
});

在我的global.js代码中，members.js被加载到members.js之前：

// HTML code that loads the javascript files
<script src="/build/global.js"></script>    
<script src="/build/members.js"></script>

顺便说一句:出于某种原因，webpack-encore使用了缩小版的ekko，即ekko-lightbox.min.js。即使是在开发模式下。我的期望是webpack-encore总是在开发模式下使用非缩小版本。我必须更改ekko-lightbox package.json文件以更改此行为( package.json中的“主”条目之前指向.min.js文件，现在它指向非缩小版本)。我认为“主”条目应该始终指向没有任何文件扩展名的目标文件(在引导程序的package.json中就是这样定义的)。也就是说，它应该看起来像"main": "dist/ekko-lightbox"，而不是"main": "dist/ekko-lightbox.js"或"main": "dist/ekko-lightbox.min.js"。

版本信息：

Google Chrome 63
"@symfony/webpack-encore": "^0.17.1",
"bootstrap": "^4.0.0-beta.3",
"jquery": "^3.2.1",
"ekko-lightbox": "^5.3.0"

更新:我注意到引导v4已经不再是测试版了。但是在运行npm update之后，问题仍然存在。我的新npm包版本如下(仅为顶级版本)：

+-- @symfony/webpack-encore@0.17.1
+-- bootstrap@4.0.0
+-- ekko-lightbox@5.3.0
+-- jquery@3.3.1
+-- node-sass@4.7.2
+-- popper.js@1.13.0
+-- sass-loader@6.0.6
`-- webpack-notifier@1.5.1

Answer 1

经过大量调试，我解决了这个问题。问题在于我是如何包含jQuery和引导的。在我的global.js中，我显式地要求使用require()调用的jQuery。然而，这是webpack自动执行，通过行.autoProvidejQuery()在我的webpack.config.js.此外，jQuery的自动提供似乎发生在webpack.config.js引用的每个javascript文件上。也就是说:我的global.js、public.js和members.js分别获得了jQuery的一个单独的实例(顺便说一句:这也降低了页面加载时间！)

显然，这些单独的jQuery实例扰乱了引导模块注册(它们在jQuery.fn[MODULE_NAME]或$.fn[MODULE_NAME]下注册)。

解决方案是创建一个所谓的对webpack.config.js的共享条目。

我的webpack.config.js现在看起来是这样的：

// ...
.addEntry('global', './assets/js/global.js')
.addEntry('public', './assets/js/public.js')
.addEntry('members', './assets/js/members.js')

.createSharedEntry('vendor', [
    'jquery',
    'popper.js',
    'bootstrap'
])

// allow sass/scss files to be processed
.enableSassLoader()

// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
// ...

我的global.js不再需要jQuery或引导，因为它们已经包含在共享模块中。对于全局CSS定义，只剩下一个require()。

// global.js
require('../css/global.scss');

我的members.js没有改变，只是我添加了行require('ekko-lightbox/dist/ekko-lightbox.css');来包含ekko自己的CSS定义。

最后，我只需扩展我的基本HTML模板，以便在任何其他javascript文件之前包括新的vendor.js和manifest.js：

{% block javascripts %}
<script src="{{ asset('build/manifest.js') }}"></script>
<script src="{{ asset('build/vendor.js') }}"></script>
<script src="{{ asset('build/global.js') }}"></script>
{% endblock %}