0

我正在尝试使用CWSpear 的插件，用于悬停下拉菜单，使用 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"在定义中评论该行，它就可以正常工作。如果它尝试加载该脚本，它将失败。

4

2 回答 2

1

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

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

值得庆幸的是，RequireJS 允许您shim通过define. 它的基本作用是告诉它文件的依赖项是什么以及应该将什么插入到window对象中，RequireJS 将确保在之前加载 deps 并在之后获取结果。

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

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

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

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

希望这可以帮助！

于 2013-06-26T08:29:15.583 回答
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 配置加载它们的顺序。

于 2013-07-03T21:46:35.000 回答