requirejs包括用於jQuery控制的多個擴展

Question

如何為名為“ fancytree”的jQuery控件加載其他擴展，我試圖讓fancytee加載或包含fancytree.table.js和其他所需的擴展-以下是我的配置

require.config({

    shim: {

        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        },
        'jquery-ui': {
            exports: "$",
            deps: ['jquery']
        },  
        'fancytree': {
            deps: ['jquery-ui']
        }, 
        'alertify': {
            deps: ['jquery']
        },
        'fancytreetable': {
            deps: ['jquery', 'fancytree']
        }
    },

    paths: {
        'jquery': '../lib/jquery/jquery',
        'underscore': '../lib/underscore/underscore',
        'backbone': '../lib/backbone/backbone',     
        'text': '../lib/text/text',
        'jquery-ui': '../vendor/jquery-ui/jquery-ui',
        'fancytree': [      
            '../vendor/fancytree/fancytree',
            '../vendor/fancytree/fancytree.table'/* this extension here needs to be added but it's not included */
        ],          
        'alertify': '../vendor/alertify/alertify'       
    },

    baseUrl: '/js/app',

});

Answer 1

Nikhil Mehta的評論為您指明了正確的方向。 您的fancytree paths值錯誤。 當您要為模塊提供備用值時，可以在其中使用數組。 例如，如果給出[A, B, C] ，則如果A加載失敗，RequireJS會嘗試B ，如果失敗，則嘗試C 如果全部失敗，那就是負載失敗。

根據您顯示的配置，您需要：

fancytree: '../vendor/fancytree/fancytree',
fancytreetable: '../vendor/fancytree/fancytree.table'

您已經有一個fancytreetable需要fancytree的shim 。

請注意，除非您使用的是Underscore和Backbone的版本過舊，否則無需為它們指定shim值。 RequireJS可能只會忽略它們，但可能會使人們難以理解您的代碼。

Answer 2

這是它的工作方式，使用帶有jquery.fancytree-all requirejs和具有AMD支持的最新jquery-ui ，因為使用單個擴展將需要進行大量填充。

onBuildWrite是可選的，但我更喜歡這種方式

requirejs.config({
  paths: {
    'jquery': './js/vendor/jquery',
    'jquery-ui': './js/vendor/jquery-ui',
    'jquery.fancytree': './js/vendor/fancytree/jquery.fancytree-all'
  },
  shim: {
    'jquery.fancytree': {
      deps: ['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'],
      exports: 'jQuery.fn.fancytree'
    }
  },
  onBuildWrite: function (moduleName, path, contents) {
    'use strict';
    if (moduleName === 'jquery.fancytree') {
      contents = 'define( "jquery.fancytree", ["jquery", "jquery-ui/core", "jquery-ui/effect", "jquery-ui/effects/effect-blind", "jquery-ui/widgets/draggable", "jquery-ui/widgets/droppable"], function(jQuery) { ' + contents + '});';
    }
    return contents;
  }
});

// usage 
 define([
     'jquery',
     'jquery.fancytree',
     'css!./css/fancytree/skin-custom/ui.fancytree.css',
   ],
   function($) {
     'use strict';
     //
     $('#tree').fancytree({
       checkbox: true,
       source: [{title: 'Node 1'}, {title: 'Node 2',key: 'id2'}]
     });
     //
   });
//