为什么在使用Require.js时我需要为AngularJS添加"垫片"？

Question

我见过几个使用它的例子:

main.js

/*global require*/
'use strict';

require.config({
    paths: {
        angular: './angular',
        app: './Content/app',
        ngAnimate: './Scripts/angular-animate',
        uiRouter: './Scripts/angular-ui-router'
    },
    shim: {
        angular: {
            exports: 'angular'
        }
    }
});

require(['angular', 'app'], function (angular) {
    angular.bootstrap(document, ['app']);
});

有人可以向我解释为什么需要垫片吗？我的应用程序使用其他模块,如angular-ui路由器,jQuery等.我是否需要做类似的事情并为这些添加垫片？

Answer 1

规则很简单:如果库/脚本/包/插件是AMD感知的,那么你不需要垫片.(实际上,你不能使用垫片.)如果它不是AMD感知的,那么你需要一个垫片.

如果库/ etc检测到AMD加载器存在并且调用define以使加载器知道它自己已知,那么它就是AMD感知的.

从大约1.8开始的jQuery不需要垫片,因为它调用define.另一方面,Angular不会打电话define.

要知道特定的代码片段是否需要垫片,您可以阅读其文档,或者如果文档不清楚,那么您可以检查调用的源代码define.例如jQuery 1.11.0有这个代码:

// Register as a named AMD module, since jQuery can be concatenated with other
// files that may use define, but not via a proper concatenation script that
// understands anonymous AMD modules. A named AMD is safest and most robust
// way to register. Lowercase jquery is used because AMD module names are
// derived from file names, and jQuery is normally delivered in a lowercase
// file name. Do this after creating the global so that if an AMD module wants
// to call noConflict to hide this version of jQuery, it will work.
if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    });
}

它的外观会因情况而异,但您想要查找的基本思路是define存在的检查,功能,amd属性设置和调用define.

(注意,jQuery是一种特殊情况,他们决定在define调用中硬编码模块的名称(第一个参数jquery:).通常,模块的名称将不会出现在define调用中,但将留给RequireJS推断在文件名的基础上.)