组合需求包和需求优化器时的模块注入问题

Question

目前，我正试图通过从一大块javascript文件转移到3-4个较小的JS应用程序来提高JS应用程序的性能，这甚至可能会导致延迟加载。

我正在使用以下npm软件包和版本：

grunt-contrib-requirejs: 1.0.0
grunt: 0.4.5
requirejs: 2.3.0

最初，有一个普通任务，它接受了所有所需的javascript文件，并使用请求优化器将它们都包含到一个文件中，因为其中有一个主配置文件main.js，其中定义了所有特定包的所有路径和shims (如果需要的话，我可以发布示例信任等等)。

现在的想法是从拥有这个大文件，将应用程序模块化为3-4个较小的javascript文件，以缩短加载时间(因为加载4个小文件并行加载比加载一个大文件要快)。

为此，我们在grunt-requirejs中使用模块选项和bundle选项来定义所有模块及其内容。

项目结构如下：

/src/
  ./Gruntfile.js
  ./scripts/
    ./app.js
    ./vendor.js
    ./app_mini.js
    ./features/
      ./test.service.js
/dist/

grunt任务的定义如下：

requirejs: {
    bundle: {
      options: {
        baseUrl: '/src',
        mainConfigFile: '/src/scripts/app.js',
        bundlesConfigOutFile: 'scripts/app.js',
        findNestedDependencies: true,
        dir: '/dist',
        modules: [
          {
            name: 'scripts/vendor',
            exclude: [],
            override: {
              {
                paths: {
                  'angular': 'bower/angular/angular',
                  'jquery': 'bower/jquery/dist/jquery'
                },
                bundles: {
                } 
              },
            }
          },

          {
            name: 'scripts/app',
            exclude: ['scripts/vendor'],
            override: {
              {
                paths: {
                  'vendor': 'scripts/vendor',
                  'app_mini': 'scripts/app_mini',
                  'testservice': 'scripts/features/test.service'
                },
                bundles: {
                  'vendor': ['angular', 'jquery']
                }
              } 
           }
        ]
      }
    }
  } 

执行了requirejs:bundle后的dist文件夹如下所示：

/dist/
  ./scripts/
    ./app.js
    ./vendor.js

因此，app_mini和testservice包含在app.js中，angular和jquery包含在vendor.js中。

我在src文件夹中的app.js大致如下所示：

define('app',
  [
    'angular', 
    'app_mini',
    'testservice'
   ],
   function(
     angular,
     app_mini,
     testservice) {}
);

require([
  'angular',
  'app_mini',
  'testservice'
], function (
  angular,
  app_mini,
  testservice
) {
  // entry to app


}, function(err) {
  console.log('error loading module: ' + err.requireModules);
};

很抱歉文件内容很长，但是如果没有它，就不可能描述这个问题:)所以，问题是，我希望有一个中心位置来将整个Requirejs配置放在优化器和应用程序本身上。但是，显然优化器的路径相对于gruntfile路径，而运行中的应用程序的路径相对于相应的文件。

由于包配置是由需求(由于bundlesConfigOutFile)自动生成的，所以在从模块选项中提取名称时，我不能对其中使用的名称做很多事情。

生成并包含到app.js中的包配置如下所示：

require.config({
  bundles: {
    'scripts/vendor': [
      'angular',
      'jquery'
    ],
    'scripts/app': [
      'testservice',
      'app_mini',
      'app'
    ]
  }
});

首先，我遇到了一个问题，RequireJs希望通过路径vendor.js scripts/scripts/vendor.js加载

为了解决这个问题，我在require.config of app中包含了一个app

但是现在我遇到了一个问题，testservice无法注入app_mini和angular，所以它在那里抛出了一个错误，因为这两个模块都是未定义的。

dist文件夹中的优化app.js如下所示，您可能会发现问题所在：

(function(){


define(
    'testservice',[
        'angular',
        'app_mini'
    ], function(
        angular,
        app_mini
    ) {
        'use strict';
 
        app_mini.factory('testservice', TestService);
 
        function TestService() {
            var service = {
                test: test
            };
            return service;
        };
 
        var test = function() {
            console.log("testservice::test()");
        };
});
 
define('app_mini',
    [
        'angular',
        'testservice'
    ],
 
    function (
        angular,
        testservice
    ) {
        'use strict';
 
 
        var module = angular.module(‘some.project’, []);
 
        module.run(AppRun);
 
        AppRun.$inject = [
            '$rootScope',
            'testservice'
        ];
        function AppRun($rootScope, testservice) {
            console.log(“yay, it works”);
 
            testservice.test();
        }
 
        return module;
    }
);
 
require.config({
    bundles: {
        'scripts/vendor.bundle': [
            'angular',
            'jquery'
        ],
        'scripts/app.bundle': [
            'testservice',
            'app_mini',
            'app'
        ]
    }
});
 
require.config({
    baseUrl: '/'
});
 
 define(‘app’,
    [
        'angular',
        'app_mini',
        'testservice'
    ], function(
        angular,
        app_mini,
        testservice
){});
 
require([
        'angular',
        'app_mini',
        'testservice'
    ], function (
        angular,
        app_mini,
        testservice
    ) {
 
    angular.element().ready(function () {
        var $html = angular.element(document.getElementsByTagName('html')[0]);
        angular.bootstrap($html, [app_mini['name']]);
    });
 
}, function (err) {
    'use strict';
 
    console.log('Error loading requirejs-module: ' + err.requireModules);
});
 
define("scripts/app.bundle", function(){});
 
})();

Answer 1

好吧，我想大概没人会读到所有这些，我只是注意到，我本可以更好地指出真正的问题。(，app_mini和angular在注射到testservice时还没有定义)

所以问题是我完全错过了shim，它允许要求js将角和jquery包装到AMD模块中。因为这是缺失的，永远找不到角，它破坏了app_mini和testservice，因此也破坏了整个应用程序。

因此，通过添加shim，我相应地编辑了供应商模块配置：

modules: [
      {
        name: 'scripts/vendor',
        exclude: [],
        override: {
          {
            paths: {
              'angular': 'bower/angular/angular',
              'jquery': 'bower/jquery/dist/jquery'
            },
            shim: {
              angular: {
                exports: 'angular',
                deps: ['jquery']
              }
            },
            bundles: {
            } 
          },
        }
      },