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>

我的require-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中的订单应与function中的参数匹配。

例如，

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

});

回调中参数的顺序应该与您在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) {
.....

RequireJs无法随机加载脚本

1 个答案: