Javascript - requireJSのプラグインを構築する

Question

私はJavascriptプラグインを書きました。私はrequireJSと互換性を持たせたいと思っています。しかし、私はそれが適切に動作するようにいくつかの困難があります。私は私のAMDが正しく書かれていないか、このようなものだと思う。

プラグインコンストラクターを実行しようとすると、requireJSがスクリプトをロードした後で定義されません（requirejsからのコールバック変数も定義されていません）。

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

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

}); 

そしてmyplugin.jsに、私はこのスクリプトを持っている：私はこのようなrequirejs使用たとえば

(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を取るということです。 defineは3つの引数だけをあなたの工場に呼び出すため、CommonJS（2番目のブランチ）とモジュールシステム（3番目のブランチ）では正常に動作しますが、AMDのケース（1番目のブランチ）で失敗します。rootは依存関係リストutil3は設定されません。

工場でrootを実際に使用しない場合は、パラメータリストから削除し、2番目と3番目のブランチのコールを調整しないでくださいそれを渡すと、すべてがうまくいくはずです。あなたの工場でそれを必要がある場合

そうでない場合は、あなたが行うには、あなたの最初の分岐を変更して、それを修正することができます：

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

これがあるべきundefined（する工場でthisの値を設定します工場出荷時の最初のパラメータをrootの値に設定して、defineコールの範囲内に設定します。その後、モジュールの後にモジュールが追加されます。

詳細については、bindのこのマニュアルを参照してください。

また、defineコールでモジュール名を設定しないでください。上に示した呼び出しは、モジュール名を削除します。呼び出しには、依存関係リストとファクトリだけが必要です。

モジュール名に.jsを入れないでください。したがってには.jsが含まれていません。