RequireJS не загружает зависимости последовательно

Question

Мне было поручено реализовать архитектуру requireJS в существующем проекте. Проект представляет собой одностраничное приложение, хотя у него есть другая страница для формы заказа. После некоторой документации, скрывающейся и экспериментирующей, я смог получить мяч.

Но мое счастье вскоре исчезло, поскольку я понял, что он не работает должным образом. Когда страница перезагружается иногда работает, а иногда выдает ошибку:

Uncaught TypeError: $beforeafter.beforeAfter is not a function

Я написал свой конфигурационный файл (также «данных основной» точкой входа в HTML тег сценария) следующим образом:

конфигурации. ЯШ:

// RequireJS configuration, see http://requirejs.org/docs/api.html#config 
require.config({ 
    // TODO: set the right path and clean up all the '../../' nonsense 
    baseUrl: '', 
    paths: { 
    // Vendor JavaScript 
    jquery: "../../node_modules/jquery/dist/jquery", 
    jqueryui: "../../src/vendor/jquery-ui/jquery-ui", 
    bootstrap: "../../node_modules/bootstrap/dist/js/bootstrap", 
    jquerycookie: "../../node_modules/jquery.cookie/jquery.cookie", 
    owlcarousel: "../../node_modules/owl.carousel/dist/owl.carousel", 
    jquerybrowser: "../../node_modules/jquery.browser/dist/jquery.browser", 
    beforeafter: "../../src/vendor/before-after/jquery.beforeafter-1.4", 
    upload: "../../src/vendor/requirejs-upload/upload", 
    touchpunch: "../../src/vendor/touch-punch/jquery.ui.touch-punch", 
    // Our custom modules 
    main: "../../src/js/modules/main", 
    gallery: "../../src/js/modules/gallery", 
    form: "../../src/js/modules/form" 
    }, 
    shim: { 
    "jqueryui": { 
     exports: "ui", 
     deps: ["jquery"] 
    }, 
    "bootstrap": { 
     deps: ["jquery"] 
    }, 
    "owlcarousel": { 
     deps: ["jquery"] 
    }, 
    "beforeafter": { 
     deps: ["jquery", "jqueryui"] 
    }, 
    "touchpunch": { 
     deps: ["jquery", "jqueryui"] 
    } 
    } 
}); 

// Start the application 
require(['main']); 

Я думаю, что эта ошибка имеет что-то делать с AMD, не совместимых скриптов (beforeAfter) и регулировочных установок, но он может так же легко, что-то делать с тем, как я использовал require() и define() поэтому я в том числе остальной части структуры:

модули/main.js:

define(['jquery', 'jquerycookie', 'bootstrap', 'touchpunch', 'gallery', 
'form', 'owlcarousel'], 
function ($, jquerycookie, bootstrap, touchpunch, gallery, form, owlcarousel) { 

    var menuItems = undefined; 
    // + a lot of other variables 

    function setUsersDeviceWidth() { 
    // some code and a lot of other functions after this one 
    } 

    function resizeCarousel() { 
    // this is where I use my custom module (gallery.js) and this works normally 
    gallery.resizeCarousel($this); 
    } 

    // This file also holds and executes jQuery .ready function 
    $(document).ready(function(){ 
    // I use my model again, it's working 
    gallery.initializeCarousel(); 
    // + a lot of other code 
    }); 
}); 

И модуль, который бросает ошибку:

модули/gallery.js

define(['jquery', 'touchpunch', 'owlcarousel', 'beforeafter'], 
function ($, touchpunch, owlcarousel, beforeafter) { 

    var carousel = $('#carousel'); 

    // function for initialisation in main.js, part of return object 
    var initializeCarousel = function() { 
    // 'owlcarousel' modules 'owlCarousel()' function works like it should 
    carousel.owlCarousel(options); 
    // it also initialises beforeAfter, where the problem occurs 
    initializeBeforeAfter($item); 
    }); 

    var initializeBeforeAfter = function($item) { 
    // Only do this once! 
    if (!$item.hasClass('already-done')) { 
     // Initalize the beforeAfter plugin 
     var $beforeafter = $item.find('.before-after'); 
     // Root of my problem; cannot refer to beforeAfter() function 
     // of 'beforeafter' module, loading sequence gets messed up? 
     $beforeafter.beforeAfter({ 
     showFullLinks: false, 
     imagePath: 'dist/images/before-after/' 
     }); 

     resizeBeforeAfter($item); 

     $beforeafter.mousemove(function(e) { 
     var $this = $(this); 
     var $thishandle = $($this.find('.ui-draggable-handle')); 
     var $thisfirst_wrapper = $($beforeafter.find(
      '> div:not(".ui-draggable-handle")')[0]); 

     var mouseX = e.pageX - $(this).offset().left; 

     $thishandle.stop().animate({'left': mouseX - 2}, 0, 'linear'); 
     $thisfirst_wrapper.stop().animate({'width': mouseX - 2}, 0, 'linear'); 
     }); 

     $item.addClass('already-done'); 
    } 
    } 

    return { 
    initializeCarousel: initializeCarousel, 
    resizeCarousel: resizeBeforeAfter 
    }; 
}); 

Я был бы признателен за любую помощь, также просил бы совета относительно require() и определения e() в этом проекте. Должен ли я применять другую структуру вызова? Я много читал по этому вопросу, но могу эффективно изучать только примеры из живых случаев :(

Answer 1

Итак, мне удалось решить проблему, вынудив requireJS загружать сомнительные модули раньше всего. измененные config.js часть

// Start the application 
require(['main']); 

с

// Start the application, but make sure everything is loaded 
require(['beforeafter', 'owlcarousel'], function() { 
    require(['main']); 
}); 

Я буду ждать до понедельника для лучшего решения, если кто-то хочет, чтобы показать более гладкий подход и краткое объяснение, почему это несоответствие является