Question

我正在使用tympanus的带有requireJS的ElastiStack js插件。 ElastiStack依赖于Desandro和Modernizr的Draggabilly。由于鼓室网站上包含的Draggabilly js是旧版本，我将其升级到Desandro网站（v1.2.4）上的最新版本，现在支持requireJS。

现在将它与requireJS一起使用，我收到了错误

ReferenceError：未定义Draggabilly

this.draggie = new Draggabilly( this.items[ this.current ] );

你可以查看the example here（我刚刚在一个免费的网络托管上托管它，所以不要介意你会在那里看到的PHP错误。）

HTML

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="css/component.css" />
        </head>
        <body>
            <ul id="elasticstack" class="elasticstack">
                <li><img src="img/1.jpg" alt="01"/><h5>Saudade</h5></li>
                <li><img src="img/2.jpg" alt="02"/><h5>Tuqburni</h5></li>
                <li><img src="img/3.jpg" alt="03"/><h5>Retrouvailles</h5></li>
                <li><img src="img/4.jpg" alt="04"/><h5>Onsra</h5></li>
                <li><img src="img/5.jpg" alt="05"/><h5>Mamihlapinatapai</h5></li>
                <li><img src="img/6.jpg" alt="06"/><h5>Koi No Yokan</h5></li>
            </ul>
            <script data-main="js/app" src="js/require.js"></script>
        </body>
    </html>

APP.JS

requirejs.config({
    'baseUrl': 'js', // Place all js core dependencies.
    'paths': { // Path where this file is located
        'draggabilly' : 'draggabilly.pkgd.min',
        'modernizr'   : 'modernizr.custom',
        'elastistack' : 'elastiStack',
        'main'        : 'main',
    },
    'shim' : {
        'elastistack' : {
            deps: ['draggabilly', 'modernizr']
        }
    }
});
requirejs([
    'elastistack',
    'main'
]);

MAIN.JS

define(['jquery'], function($) {
    $(function() {
        var asd = new ElastiStack($('#elasticstack')[0]);
    });
});

Javascript referenceError Draggabilly未使用requireJS定义

0 个答案: