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

为您指明了正确的方向。 fancytree 的 paths 值是错误的。当你想为模块提供回退值时，你可以在那里使用一个数组。如果你给 [A, B, C]，例如，如果 A 加载失败，RequireJS 会尝试 B，如果失败，则尝试 C。如果全部失败，那就是加载失败。

根据您显示的配置，您需要：

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

您已经有一个 shim 确定 fancytreetable 需要 fancytree。

请注意，除非您使用相当旧版本的 Underscore 和 Backbone，否则您不需要为它们指定 shim 值。 RequireJS 可能会忽略它们，但它可能会使阅读您的代码的人感到困惑。

Answer 2

这是它的工作原理，requirejs jquery.fancytree-all 和最新的 jquery-ui AMD 支持，因为使用单独的扩展需要大量的调整。

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

requirejs 包括 jquery 控件的多个扩展

requirejs include multiple extensions for jquery control

javascript

jquery

requirejs

backbone.js