CWSpear 的悬停下拉菜单是否准备就绪（requirejs）？

Question

我正在尝试使用 CWSpear`s plugin，用于带有悬停的下拉菜单，使用 require.js。 但我不断收到错误消息：“错误：脚本错误”。 我需要做什么才能将它与 require.js 一起使用？

编辑：

为了帮助@jakee 解决问题，这是我所做的配置：

requirejs.config({
    paths: {
        "myBootstrap": _myBootstrappingPath + "js/bootstrap",
        "myControllers" : _myBootstrappingPath + "js/controllers", 

        //jquery
        "jquery": _libsPath + "jquery/1.9.1/js/jquery",
        "jquery_validate": _libsPath + "jquery/validate/1.12.0/js/jquery.validate",

        //Bootstrap related
        "twitterBootstrap": _libsPath + "bootstrap/2.3.1/",
        "select2" : _libsPath + "select2/3.3.2/select2", 

        //misc
        "underscore": _libsPath + "underscore/1.4.4/js/underscore",
        "backbone": _libsPath + "backbone/1.0.0/js/backbone",

        "backbonePageable": _libsPath + "backbone/backbone-pageable/1.2.0/js/backbone-pageable",
        "backgrid": _libsPath + "backgrid/0.2.0/backgrid",
        "backgridAssets": _libsPath + "backgrid/0.2.0/assets/js",
        "backgridExtensions": _libsPath + "backgrid/0.2.0/extensions",

        //plugins and extensions                                                  
        "plugins_datetimepicker": _pluginsPath + "/datetimePicking/bootstrap-datetimepicker",   
        "plugins_dropdownHover": _pluginsPath + "/dropdownHover/dropdownHover",
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },    
        bootstrap: {
          deps: ["jquery"],
          exports: "$.fn.popover"
        },  
        'select2': ["jquery"],
        'backgrid': {
            deps: ["jquery", "backbone"],
            exports: "Backgrid"
        },
        'backbonePageable':  {
            deps: ["jquery", "underscore", "backbone"],
            exports: "PageableCollection",
            init: function(nhonho){
                Backbone.PageableCollection = PageableCollection;
            }
        },
        plugins_datetimepicker: {
            deps: ["jquery", "bootstrap"]
        },
        plugins_dropdownHover: {
            deps: ["jquery", "bootstrap"]
        }   
    }
});

并将其用于：

(function (bs) {

    require(["jquery", 
        "twitterBootstrap", 
        "select2", 
        "plugins_datetimepicker", 
        "plugins_dropdownHover", 
        "myControllers/defaultController"], function ($) {

        var defaultCtrlr = new ticket.defaultController(bs);

        bs.onInit();
        defaultCtrlr.start(bs.options);
        bs.onReady();
    });                    


})(window.my.bootstrap);

只要我在定义中注释"plugins_dropdownHover" 行，它就可以正常工作。如果它尝试加载该脚本，则会失败。

Answer 1

我发现您的配置可能存在一些问题：

1：路径配置和 shim 配置之间的命名可能有些混淆。例如，我在 shim 中看到了这个：

    bootstrap: {
      deps: ["jquery"],
      exports: "$.fn.popover"
    },  

但是在路径中你有这个：

    "twitterBootstrap": _libsPath + "bootstrap/2.3.1/",

它们应该匹配。我怀疑当您需要 'plugins_dropdownHover' 时会发生什么，它会查找 shim 依赖项 'bootstrap'，然后永远找不到加载它的路径，因为您的路径配置包含 'twitterBootstrap' 而不是 'bootstrap'

2：_libsPath + "bootstrap/2.3.1/" 看起来像是文件夹的路径，而不是文件。当您稍后需要 'twitterBootstrap' 并查看 Chrome 开发工具（或您使用的任何工具）的网络选项卡时，您是否看到加载了正确的引导文件？

如果您只是对这个库进行填充，我认为它看起来像这样：

requirejs.config({
    paths: {
        jquery: _libsPath + "jquery/1.9.1/js/jquery",
        // note: full path to file (minus the .js)
        bootstrap: _libsPath + "bootstrap/2.3.1/bootstrap",
        plugins_dropdownHover: _pluginsPath + "/dropdownHover/dropdownHover"
    },
    shim: {
        jquery: {
            exports: ["jQuery", "$"]
        },
        bootstrap: {
          deps: ["jquery"],
          exports: "$.fn.popover"
        },
        plugins_dropdownHover: {
            // might be able to list just bootstrap here since it will follow the chain
            // and load jQuery before loading bootstrap
            deps: ["bootstrap", "jquery"]
        }
    }
});

Demo Page 仅列出三个脚本：jQuery、Bootstrap 和插件。这正是 RequireJS 使用上述 shim 配置加载它们的顺序。

Answer 2

任何东西都可以与 RequireJS 一起使用，无论是通过 AMD 方式还是通过 shim config。

首先，您需要知道该模块是否与 AMD 兼容。检查的最佳位置是源代码。在 RequireJS 中，所有 AMD 模块都使用 define 函数声明。如果源代码中没有对上述函数的引用，您可以确定您的库/插件/任何不支持 AMD 开箱即用。如果define 存在，您可以通过在paths 配置中声明来导入文件。

谢天谢地，RequireJS 允许您通过define shim 未声明其内容为 AMDable 的 javascript 文件。它的基本作用是告诉它文件的依赖项是什么以及应该将什么插入到 window 对象中，RequireJS 将确保在之前加载 deps 并在之后获取结果。

paths: {
  'otherlib': 'path/to/otherlib',
  'mylib': 'path/to/mylib' // define alias for mylib
}
shim: {
  'mylib': {
     deps: ['otherlib'],
     exports: 'MyLib'
   }
}

由于您要加载的文件是一个 jquery 插件，因此不需要导出或任何东西，因为该插件只是将其内容粘贴到 $ 中。 RequireJS 提供了一个很好的例子 this

"shim": {
  "jquery.someplugin": ["jquery"],
  "jquery.otherplugin": ["jquery"]
}

注意！在示例中，RequireJs 被配置为不需要使用别名，因为baseUrl 指向包含 jquery 和插件的目录！

希望这会有所帮助！