javascript - Angular js 脚本中的多个 IIFE 并使用 RequireJS 注入(inject)

Question

我需要使用 RequireJS 注入(inject)我的 angularJs 脚本文件，并且它工作正常。但我不能在单个文件中写入多个 iife。在这种情况下，只有一个 iife 会被执行。以下是我的代码。

(function () {
define([
    'angular'
], function () {
    angular.module('framework', ['ui.router', 'pluggableViews'])
        .controller('appCtrl', function ($scope) {
            $scope.label = 'Test label';
        });
 });
})();

(function () {

define([
'angular'
], function () {

    angular.module('framework').config(['$urlRouterProvider',
        '$pluggableViewsProvider',
        function ($urlRouterProvider, $pluggableViewsProvider) {

            $urlRouterProvider.otherwise('/login');
        }]);

});
})();

上面的代码中只执行了第一个iife。第二个生命没有得到任何断点。使用 requireJS 时如何解决这个问题？如果我将两个 iife 移动到两个单独的文件中，那么它就会起作用。但这对我来说不可能在所有情况下都可行。请给我建议一个解决方案。

Answer 1

您在同一个文件中有多个匿名 define 调用。这是 RequireJS 无法处理的。当 RequireJS 遇到匿名 define 时，它会使用用于加载文件的模块名称作为它将分配给匿名定义的模块的模块名称。这就是模块名称的由来。如果同一个文件中有多个匿名 define ，那么 RequireJS 应该做什么？两个模块不能具有相同的名称，并且它不会为您发明名称。当单个文件中存在多个模块时，您必须通过将名称作为第一个参数传递给 define 来显式命名它们。 (这就是优化器 (r.js) 为您所做的事情。)

(抛开理论:两个不同的 RequireJS 上下文 都可以有一个同名的模块，但这不能成为这里的一个因素，因为从同一文件加载的两个模块将位于相同的上下文中。)

如果您想保留匿名 define 调用，请将这两个模块保留在单独的文件中。或者，如果您绝对必须将模块放在一个文件中，则命名它们。我会将它们分开进行开发，并让 bundler 在生成用于部署的 bundle 时为它们命名。