一种使用 require 加载主干堆栈的方法答案

【问题标题】：A method for loading the backbone stack with require一种使用 require 加载主干堆栈的方法
【发布时间】：2013-02-07 19:13:14
【问题描述】：

这是我将如何使用这个SO Question on CDN suggestions 的纯 HTML 脚本标签来实现的。这将是一个支撑页面其余部分的串行加载（下划线->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 链接）

【问题讨论】：

标签： javascript

【解决方案1】：

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

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

您可以将它们包含为“外部”，并使用 shim 分配正确的依赖项（参见此处 the docs 和 tutorial）
或者，您可以使用启用 AMD 的两个库的略微更改版本。你可以在this repository找到他们。
使用旧版本的主干和下划线。（不推荐）

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

这是一个使用库的 ALTERED VERSIONS 的工作示例：

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: "_"
        }
    }
});

【讨论】：

不，就像我说的那样，这是加载从该存储库下载的主干和下划线 ALTERED 版本的示例。
是的。让我将第二个示例更改为 CDN
fyi，我认为您不需要在对象文字中的键周围加上引号......所有键都是字符串，没有一个是变量。
我没有。但是我将配置文件的第一部分与需要它的 requirejs 优化器插件一起使用。
你为什么不定义一个baseUrl 作为 API 提到的和下面的答案？

【解决方案2】：

这就是我们在项目中包含 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.
});

【讨论】：