Question

我是Reqire.JS的新手，我无法让fancybox与Google CDN jQuery一起使用。

我的文件结构是：

index.html/
├── js/
│   ├── app.js
│   ├── app/
│   |   ├── main.js
│   ├── lib/
│   |   ├── require.js
│   |   ├── jquery.fancybox.js
│   |   ├── jquery.fancybox-thumbs.js
│   |   ├── jquery.fancybox-media.js
│   |   ├── jquery.mousewheel-3.0.6.pack.js

app.js

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app",
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
      "jquery.fancybox": "jquery.fancybox",
      "jquery.fancybox-thumbs": "jquery.fancybox-thumbs",
      "jquery.fancybox-media": "jquery.fancybox-media",
      "jquery.mousewheel-3.0.6.pack": "jquery.mousewheel-3.0.6.pack"
    }
});

requirejs(["app/main"]);

main.js

define(["jquery", "jquery.fancybox-media", "jquery.fancybox-thumbs", "jquery.fancybox", "jquery.mousewheel-3.0.6.pack"], function ($) {
    $(function() {
        $('.fancybox').fancybox();
    });
});

HTML

<head>
        <script data-main="js/app" src="js/lib/require.js"></script>
    </head>
    <body>
        <a class="fancybox" href="myImage.jpg" data-fancybox-group="gallery" title="">
            <h5>Click</h5>
        </a>
    </body>

我仍然没有定义jQuery的错误。我可以在DOM上看到我的fancybox库和jQuery，但没有任何反应。

Answer 1

您可能需要按照文档here来填充fancybox文件。

类似的东西：

requirejs.config({
    baseUrl: 'Scripts',
    paths: {
        "app": "../App",
        "jquery": 'jquery-3.1.1' //Or use cdn
    },
    shim: {
        "jquery.fancybox": ["jquery"]
    }
});

requirejs(["app/index"]);

你得到的错误很可能是由于需要尝试异步加载jQuery和fancybox文件，首先接收fancybox（因为它更小）并且由于jQuery文件尚未加载而无法使用它所以错误。

要求JS使用CDN jQuery和Fancybox

1 个答案: