5

オープン ソース配布用の最初の AngularJS モジュールを作成しています。他の人が食べやすいように包装したいと思います。

UMD プロジェクトは、AMD、CommonJS (または少なくとも Node)、およびブラウザー グローバルと互換性のある JavaScript モジュールをエクスポートするためのパターンを提供します。

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['b'], factory); // AMD
  } else if (typeof exports === 'object') {
    module.exports = factory(require('b')); // Node
  } else {
    root.returnExports = factory(root.b); // browser global (root is window)
  }
}(this, function (b) {
  // use b in some fashion
  return {}; // return a value to define the module export
}));

ただし、AngularJS には独自の内部モジュール システムがあるため、モジュールの登録は、angularオブジェクトのメソッドを呼び出すだけで行われますangular.module()。したがって、UMD モジュールは何もエクスポートする必要はありません。を要求し、それに基づいて行動する必要があるだけですangular。前の例に関しては、次のようになると思います。

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    factory(require(['b'])); // AMD
  } else if (typeof exports === 'object') {
    factory(require('b')); // Node
  } else {
    factory(root.b); // browser global (root is window)
  }
}(this, function (b) {
  // use b in some fashion
}));

または、私の場合に固有：

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    factory(require(['angular'])); // AMD
  } else if (typeof exports === 'object') {
    factory(require('angular')); // Node
  } else {
    factory(root.angular); // browser global (root is window)
  }
}(this, function (angular) {
  angular.module( ... );
}));

これは大したことではありませんか、それとも UMD の精神に反しますか? 何もエクスポートしない UMD パターンが見つからなかったので質問します。

4

2 に答える 2

2

このパターンを使用しても問題はないと思います。お気づきかもしれませんが、Angular は独自のモジュール システムを使用するため、既存のモジュール システムとうまく連携できませんが、モジュールは何もエクスポートする必要はありません。プロジェクトのメイン モジュールが何かをエクスポートする頻度は? 通常、依存関係を取得するだけです。

同様のことを行う例を探している場合は、UMD を使用するが jQuery に依存する jQuery マウスホイール プラグインを調べることができます。

からの抜粋jquery.mousewheel.js:

(function (factory) {
    if ( typeof define === 'function' && define.amd ) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node/CommonJS style for Browserify
        module.exports = factory;
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {

1 つの違いは、拡張したい jQuery オブジェクトを渡すことができるように、Node/CommonJS エクスポートのコンストラクターを返すことです。

余談ですが、AMD のセクションで、UMD の実装に関する問題が 1 つあります。

あなたが持っている：

factory(require(['b'])); // AMD

必要な場所:

define(['b'], factory); // AMD

AMD は非同期であるため、angular モジュールを同期的に要求することはできません。

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['b'], factory); // AMD
  } else if (typeof exports === 'object') {
    factory(require('b')); // Node
  } else {
    factory(root.b); // browser global (root is window)
  }
}(this, function (b) {
  // use b in some fashion
}));
于 2015-12-22T23:19:10.220 に答える
1

angular プラグインとして、代わりにビルダーをエクスポートするモジュールを提供する方が良いかもしれません。これにより、人々は「角度が意味すること」に責任を持ち続けることができます。たとえば、angular のカスタマイズされたデバッグ バージョンを使用しているが、あなたのコードを使用したいとします。これは素晴らしいアイデアのように思えますが、実際にはそうではありません。

var myangular = require('debug-angular/ext/symbolised');
var yourmodule = require('yourmodule');
yourmodule.register(myangular);

開発者として、あなたのコードは2 つの異なるバージョンの angular をロードするのではなく、私のangular を使用することになり、そこから発生するすべての陽気なバージョンの不一致のバグがあることを知っています。

したがって、より優れた umd ファクトリは次のようになります。

(function (root, factory) {
  if (typeof define !== 'undefined' && define.amd) {
    define(['angular'] , function (angular) {
      factory(angular);
    });
  } else if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
      register: function(angular) {
        factory(angular);
      }
    };
  } else {
    factory(root.angular); // browser global (root is window)
  }
}(this, function (angular) {
  angular.module( ... );
}));
于 2015-12-22T23:03:17.763 に答える