javascript - RequireJS 无法一致地加载依赖项

Question

我的任务是在现有项目中实现 requireJS 架构。该项目是一个单页面应用程序，尽管它还有另一个用于订单表格的页面。经过一些潜伏的文档和实验后，我终于能够开始工作了。

但我的快乐很快就消失了，因为我意识到它没有按预期工作。当页面重新加载时，有时它可以工作，有时会抛出错误:

Uncaught TypeError: $beforeafter.beforeAfter is not a function

我编写了我的配置文件(也是 html 脚本标记中的“data-main”入口点)，如下所示:

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) 和 shim 设置有关，但也可能与我使用 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
  });
});

以及抛出错误的模块:

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() 使用的建议。我应该应用不同的调用结构吗？我读过很多关于这个主题的文章，但我只能从活生生的案例中有效地学习:(

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']);
});

如果有人愿意展示更流畅的方法并简短解释为什么会发生这种不一致，我将等到周一寻求更好的解决方案。