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) { 
.....