2

以下是我如何使用纯 HTML 脚本标签按照这个关于 CDN 建议的 SO Question 来完成的。这将是一个串行加载（下划线->jquery->backbone），它支撑了页面的其余部分。

 <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>

我将如何使用 require.js 或类似的非阻塞方法加载这些库？

参考资料（API 链接）

4

2 回答 2

3

jquery 是 AMD 友好的，所以你可以在你的 require.js 配置中使用它

主干和下划线不再对 AMD 友好，因此您有以下选项：

  1. 您可以将它们包含为“外部”，并使用 shim 分配正确的依赖项（请参阅此处的文档和教程）

  2. 或者，您可以使用启用 AMD 的两个库的略微更改版本。您可以在此存储库中找到它们。

  3. 使用旧版本的主干和下划线。（不建议）

注意：如果您选择 shiming 路由，请记住这些库不会异步加载。

这是一个使用库的更改版本的工作示例：

require.config({
    enforceDefine: true, //Only libraries AMD Friendly will be loaded
    urlArgs: "bust=" + (new Date()).getTime(), //for development, forces browser to clear the cache
    paths: { // relative paths (to the current file main.js)
        "es5":               'libs/es5-shim/es5-shim',
        "jquery":            'libs/jquery/jquery',
        "jqueryThreeDots":   'libs/jquery/plugins/jquery.ThreeDots',//A jquery plugin
        "underscore":        'libs/underscore/underscore.amd',
        "underscore.string": 'libs/underscore/underscore.string',
        "backbone":          'libs/backbone/backbone.amd',
        "text":              'text',
        "mediator":          'libs/backbone/plugins/backbone.mediator',
        "bootstrap":         'libs/bootstrap/bootstrap.min',
        "rangy":             'libs/rangy/rangy-core.amd',
    },
    shim: {
        "bootstrap": {
            deps: ["jquery"],
            exports: "$.fn.popover"
        }
    }
});

垫片的一个例子：

require.config({
    enforceDefine: true,
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        "jquery": 'http://code.jquery.com/jquery-1.9.1.min.js'
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"], // Backbone dependencies
            exports: "Backbone" // variable exported
        },
        underscore: {
            exports: "_"
        }
    }
});
于 2013-02-07T19:24:31.507 回答
1

这就是我们在项目中包含 jQuery、Underscore 和 Backbone 的方式：

requirejs.config({
    baseUrl: "js",

    paths: {
        backbone: "backbone-min",
        jquery: "jquery.min",
        underscore: "underscore-min"
    },

    shim: {
        backbone: { deps: ["underscore", "jquery"], exports: "Backbone" },
        jquery: { exports: "jQuery" },
        underscore: { exports: "_" }
    }
});

requirejs(["backbone"], function (Backbone) {
    // Now we can reference not just Backbone but also jQuery and
    // underscore since those two are dependencies for Backbone.
});
于 2013-02-07T19:31:49.977 回答