RequireJs无法随机加载脚本

Question

我有一个HTML模板（来自themeforest），它有很多jQuery插件和一个main.js，其中所有这些模板都是为模板实例化和配置的。我正在创建一个基于该模板的AngularJS应用程序，并且正在使用RequireJS来加载我的脚本。在模板的index.html中，我加载了我的require-config.js文件。 80％的时间，应用程序加载正常，但另外20％，错误出现像“jQuery不是一个函数”或“$（...）。mmenu不是函数”。这是我的文件。有人可以弄清楚我做错了什么？

<script type="text/javascript" src="js/jquery-lib.js"></script><!-- Jquery Library --> 
    <script type="text/javascript" src="js/jquery-migrate-1.3.0.min.js"></script> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src='js/mapbox.js'></script> 
    <script type="text/javascript" src='js/leaflet.markercluster.js'></script> 
    <script type="text/javascript" src="js/build.min.js"></script> 
    <script type="text/javascript" src="lib/chosen/chosen.jquery.js" ></script> 
    <script type="text/javascript" src="js/jquery-ui.js"></script> 
    <script type="text/javascript" src="lib/slick/slick.min.js"></script> 
    <script type="text/javascript" src="lib/jquerym.menu/js/jquery.mmenu.min.all.js"></script> 
    <script type="text/javascript" src="lib/Magnific-Popup-master/jquery.magnific-popup.min.js"></script> 
    <script type="text/javascript" src="lib/jQuery.filer-master/js/jquery.filer.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap-rating.js"></script> 
    <script type="text/javascript" src="lib/popup/js/classie.js"></script> <!-- Popup --> 
    <script type="text/javascript" src="lib/popup/js/modalEffects.js"></script> <!-- Popup --> 
    <script type="text/javascript" src="js/main.js"></script> 

最后一个是main.js，其中一切都被初始化。所以，现在，在我的index.html我有这样的：

<script data-main="require-config" src="bower_components/requirejs/require.js"></script> 

我的要求，confing.js看起来像这样

require.config({ 
paths: { 
    jquery: 'js/jquery-lib', 
    jquerymigrate: 'js/jquery-migrate-1.3.0.min', 
    rating: 'js/bootstrap-rating', 
    build: 'js/build.min', 
    mapbox: 'js/mapbox', 
    leaflet: 'js/leaflet.markercluster', 
    chosen: 'lib/chosen/chosen.jquery', 
    jqueryui: 'js/jquery-ui', 
    slick: 'lib/slick/slick.min', 
    jquerymenu: 'lib/jquerym.menu/js/jquery.mmenu.min.all', 
    magnific: 'lib/Magnific-Popup-master/jquery.magnific-popup.min', 
    fileLoader: 'lib/jQuery.filer-master/js/jquery.filer.min', 
    main: 'js/main', 
    angular: 'bower_components/angular/angular', 
    angularRoute: 'bower_components/angular-route/angular-route', 
    angularMocks: 'bower_components/angular-mocks/angular-mocks', 
    angularTranslate: 'bower_components/angular-translate/angular-translate', 
    angularTranslateLoadProvider: 'bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files', 
    text: 'bower_components/requirejs-text/text' 
}, 
shim: { 
    'jquery': { 
     'exports': 'jquery' 
    }, 
    'jquerymigrate': { 
     deps: ['jquery'] 
    }, 
    'build': { 
     deps: ['jquery'] 
    }, 
    'mapbox': { 
     deps: ['jquery'] 
    }, 
    'leaflet': { 
     deps: ['jquery', 'jquerymigrate'] 
    }, 
    'chosen': { 
     deps: ['jquery'] 
    }, 
    'jqueryui': { 
     deps: ['jquery'] 
    }, 
    'slick': { 
     deps: ['jquery', 'jqueryui'] 
    }, 
    'fileLoader': { 
     deps: ['jquery'] 
    }, 
    'js/bootstrap-rating': { 
     deps: ['jquery'], 
     'exports': 'rating' 
    }, 
    'jquerymenu': { 
     deps: ['jquery'], 
     'exports': 'jquerymenu' 
    }, 
    'magnific': { 
     deps: ['jquery'] 
    }, 
    'main': { 
     deps: ['jquery', 'jqueryui', 'build', 'mapbox', 'chosen', 'fileLoader', 'rating', 'jquerymenu', 'slick', 'magnific'] 
    }, 
    'angular': { 'exports': 'angular' }, 
    'angularRoute': ['angular'], 
    'angularTranslate': ['angular'], 
    'angularTranslateLoadProvider': ['angularTranslate'], 
    'angularMocks': { 
     deps: ['angular'], 
     'exports': 'angular.mock' 
    } 
} 

最后我app.js这样

define([ 
    'angular', 
    'angularRoute', 
    'angularTranslate', 
    'angularTranslateLoadProvider', 
    'jquery', 
    'build', 
    'mapbox', 
    'leaflet', 
    'chosen', 
    'jqueryui', 
    'rating', 
    'slick', 
    'jquerymenu', 
    'fileLoader', 
    'main', 
    'view1/view1', 
    'view2/view2' 
], function (angular, angularRoute, view1, view2, angularTranslate, angularTranslateLoadProvider) { 
    // Declare app level module which depends on views, and components 
    return angular.module('myApp', [ 
     'ngRoute', 
     'pascalprecht.translate', 
     'myApp.view1', 
     'myApp.view2' 
    ]).config(['$routeProvider', '$translateProvider', function ($routeProvider, $translateProvider) { 
     $routeProvider.when('/menu', { 
      resolve: { 
       "prevent": function() { 
        window.location.href = window.lastPath; 
       } 
      } 
     }).otherwise({ redirectTo: '/view1' }); 
     $translateProvider.useStaticFilesLoader({ 
      prefix: 'translations/', 
      suffix: '.json' 
     }); 
     $translateProvider.preferredLanguage('es'); 
    }]); 
}); 

Answer 1

这是根据我的问题

您在define中的订单应该与中的参数匹配。

例如，

define(['module1', 'module2',......, 'moduleK'], function(module1, module2,...., moduleK){ 

}); 

在你的回调参数的顺序应该与你所requireing模块作为依赖于你的define

因此，你的代码应该是这个样子的顺序;

define([ 
    'angular', 
    'angularRoute', 
    'angularTranslate', 
    'angularTranslateLoadProvider', 
    'jquery', 
    'build', 
    'mapbox', 
    'leaflet', 
    'chosen', 
    'jqueryui', 
    'rating', 
    'slick', 
    'jquerymenu', 
    'fileLoader', 
    'main', 
    'view1/view1', 
    'view2/view2' 
], function (angular, angularRoute, angularTranslate, angularTranslateLoadProvider, $, build, mapbox, leaflet, chosen, jqueryui, rating, slick, jquerymenu, fileloader, main, view1, view2) { 
.....