Javascript - построить плагин для requireJS

Question

Я наложил плагин Javascript, и я хочу сделать его совместимым с requireJS. Однако у меня есть некоторые трудности, чтобы заставить его работать должным образом. Я думаю, что моя AMD неправильно написана или что-то в этом роде.

Когда я пытаюсь выполнить конструктор плагина, он не определен после того, как requireJS загрузил скрипт (также не определена переменная обратного вызова из requirejs).

Например, я использую requirejs так:

requirejs([ 
'./assets/js/myplugin.js' 
], function(myplugin) { 

    console.log(myplugin); // undefined 
    new MyPlugin(); // undefined 

}); 

И в myplugin.js У меня есть этот скрипт:

(function (root, factory) { 

if (typeof define === 'function' && define.amd) { 

    define(
     'myplugin', 
     ['brandname-util1/util1', 
     'brandname-util2/util2', 
     'brandname-util3/util3'], 
     factory 
    ); 

} else if (typeof exports === 'object' && module.exports) { 

    module.exports = factory(
     root, 
     require('brandname-util1'), 
     require('brandname-util2'), 
     require('brandname-util3') 
    ); 

} else { 

    root.MyPlugin = factory(
     root, 
     root.BrandNameUtil1, 
     root.BrandNameUtil2, 
     root.BrandNameUtil3 
    ); 

} 

}(this, function factory(root, util1, util2, util3) { 

    'use strict'; 

    var MyPlugin = function() { 
    } 

    return MyPlugin; 

})); 

Скрипт правильно загружен (Асинхронный), но ничего не определено. Я не совсем понимаю, как это работает.

EDIT: вот пример Utils скрипты:

// util1 
(function(root, factory) { 

    if (typeof define === 'function' && define.amd) { 

     define(
      'brandname-util1/util1', 
      ['jquery'], 
      factory 
     ); 

    } else if (typeof module === 'object' && module.exports) { 

     module.exports = factory(require('jquery')); 

    } else { 

     root.BrandNameUtil1 = factory(root); 

    } 

}(this, function() { 

    "use strict"; 

    var util1 = {}; 

    // declare some functions 

    return util1; 

})); 

// util2 
(function(root, factory) { 

    if (typeof define === 'function' && define.amd) { 

     define(
      'brandname-util2/util2', 
      ['jquery'], 
      factory 
     ); 

    } else if (typeof module === 'object' && module.exports) { 

     module.exports = factory(require('jquery')); 

    } else { 

     root.BrandNameUtil2 = factory(root); 

    } 

}(typeof window !== "undefined" ? window : this, function() { 

    "use strict"; 

    var util2 = function() {}, 
     proto = util2.prototype; 

    // declare some proto 

    return util2; 

})); 

// util3 
(function (root, factory) { 

    if (typeof define === 'function' && define.amd) { 

     define(
      'brandname-util3/util3', 
      ['brandname-util1/util1', 
      'brandname-util2/util2'], 
      factory 
     ); 

    } else if (typeof module === 'object' && module.exports) { 

     module.exports = factory(
      root, 
      require('brandname-util1'), 
      require('brandname-util2') 
     ); 

    } else { 

     root.BrandNameUtil3 = factory(
      root, 
      root.BrandNameUtil1, 
      root.BrandNameUtil2 
     ); 

    } 

}(this, function (root, util1, util2) { 

    "use strict"; 

    var util3 = function() {}, 
     proto = util3.prototype; 

    // declare some proto 

    return util3; 

})); 

Answer 1

Единственная проблема, которую я вижу, что ваш завод занимает root в качестве первого аргумента, а затем модули. Он отлично работает в CommonJS (2-й филиал) и без модульной системы (3-я ветвь), но он не работает в корпусе AMD (1-я ветвь), потому что define вызовет ваш завод только с тремя аргументами: root будет установлен на первый модуль список зависимостей, util3 не будет установлен и т. д.

Если вы на самом деле не используете root на своем заводе, вы можете просто удалить его из списка параметров и настроить вызовы во 2-й и 3-й ветках, чтобы не было пропустите его, и все должно работать.

В противном случае, если вам нужно это в вашей фабрике, вы можете это исправить, изменив свой первый филиал сделать:

define(['brandname-util1/util1', 
    'brandname-util2/util2', 
    'brandname-util3/util3'], 
    factory.bind(undefined, root) 
); 

Это устанавливает значение this на заводе, чтобы быть undefined (который должен быть штраф) и заставляет первый параметр на заводе быть установленным на значение root в рамках вашего вызова define. Затем модули добавляются после него.

Подробнее см. Эту документацию по адресу bind.

Вы также не должны указывать имя модуля в своем вызове define. Вызванный мной вызов удаляет имя модуля. В вызове должен быть только список зависимостей и заводской.

И не следует помещать .js в имена модулей. Таким образом, requirejs(['./assets/js/myplugin'], без .js.