javascript - RequireJS不会始终加载依赖项

我的任务是在现有项目中实现requireJS体系结构。该项目是一个单页应用程序，尽管它具有用于订单表单的另一页。经过一些文档潜伏和实验，我得以使事情顺利进行。

但是我的幸福很快消失了，因为我意识到它并没有按预期运行。重新加载页面时，有时它可以工作，而其他时候则抛出错误：


  未捕获的TypeError：$ beforeafter.beforeAfter不是函数


我写了我的配置文件（也是html脚本标记中的“数据主”入口点），如下所示：

config.js：

// 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()的方式一样容易，因此我将其余的内容包括在内。结构：

modules / 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
  });
});

和引发错误的模块：

modules / 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（）和define（）用法寻求建议。我应该使用其他呼叫结构吗？我已经阅读了很多有关该主题的文章，但是我只能从实际案例中学习：(

最佳答案

因此，我设法通过强制requireJS先加载有问题的模块来解决此问题。我已经更改了config.js部分

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

与

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

如果有人愿意表现出一种更平滑的方法并简短地解释这种不一致的原因，我将等到星期一寻求更好的解决方案。