Question

我在项目中使用Jquery UI，Bower和RequireJS，并且很难使用Require配置Jquery UI。基本上Jquery UI试图在根目录中找到它的依赖项，而不是它们所在的位置，这给了我一个错误。

据我所知，从1.11开始，Jquery UI支持AMD，文档说明它适用于这样的目录：


    ├── index.html
    ├── js
    │   ├── app.js
    │   ├── jquery-ui
    │   │   ├── accordion.js
    │   │   ├── autocomplete.js
    │   │   ├── button.js
    │   │   ├── core.js
    │   │   ├── datepicker.js
    │   │   ├── dialog.js
    │   │   └── ...
    │   ├── jquery.js
    │   └── require.js

但是，使用Bower，目录更像是


    ├── index.html
    ├── js
    │   ├── app.js
    |── bower_componenents
    │   ├── jquery-ui
    │   │   ├── accordion.js
    │   │   ├── autocomplete.js
    │   │   ├── button.js
    │   │   ├── core.js
    │   │   ├── datepicker.js
    │   │   ├── dialog.js
    │   ├── jquery
    │   │   ├── jquery.js
    │   └── require 
    │   │   ├── require.js

如何配置Require以便Jquery UI可以找到它的依赖项？

Answer 1

我能够通过在requirejs配置中使用path属性对bower_components进行别名来使其部分工作。但是内部jquery库假设所有的javascript文件都集中在同一个目录结构中（相对引用），所以它仍然无法正常工作。

我考虑使用Grunt在我的js目录下复制我的依赖项，以便所有内容都在同一个baseUrl上。不完全理想，但它可能会使以后更容易使用r.js或gulp。

Answer 2

我只是把它弄错了。将配置文件更改为

后，我将其工作


    require.config({

    shim: {

        underscore: {
            exports: '_'
        },

        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },

        backboneLocalstorage: {
            deps: ['backbone'],
            exports: 'Store'
        },

    paths: {

        jquery: '../bower_components/jquery/dist/jquery',
        'jquery-ui': '../bower_components/jquery-ui/jquery-ui',
        underscore: '../bower_components/underscore/underscore',
        backbone: '../bower_components/backbone/backbone',
        backboneLocalstorage: '../bower_components/backbone.localStorage/backbone.localStorage',
        moment: '../bower_components/moment/moment',
        text: '../bower_components/requirejs-text/text'
    }
});



require(['backbone', 'views/app-view', 'routers/router'],

    function   (Backbone, AppView, Workspace  ) {

        new Workspace();
        Backbone.history.start();       
        new AppView();  

});

然后在我的骨干视图中定义如此


    define([
    'collections/todos-collection',
    'views/todo-view',
    'common',
    'backbone',
    'jquery',
    'jquery-ui'

], function(Todos, TodoView, Common, Backbone, $){

如您所见，jquery-ui将自身附加到$符号。

希望这有帮助。

无法使用Bower，Jquery UI和RequireJS查找Jquery UI依赖项

2 个答案: