36

次のすべてのモジュール形式をサポートするjavascriptマイクロライブラリ（依存関係のないライブラリ）を作成する方法はありますか？

  • 非同期モジュールの定義
  • CommonJS
  • ライブラリのエクスポートをグローバル名前空間オブジェクト（ローダーなし）として公開する
4

6 に答える 6

51

はい、この答えはdedと彼のすばらしいモジュールのおかげです。

(function(name, definition) {
    if (typeof module != 'undefined') module.exports = definition();
    else if (typeof define == 'function' && typeof define.amd == 'object') define(definition);
    else this[name] = definition();
}('mod', function() {
    //This is the code you would normally have inside define() or add to module.exports
    return {
        sayHi: function(name) {
            console.log('Hi ' + name + '!');
        }
    };
}));

これは、次のように使用できます。

  1. AMD の場合 (requireJS など):

    requirejs(['mod'], function(mod) {
    mod.sayHi('Marc');
});

  2. commonJS (例: nodeJS):

    var mod = require('./mod');
mod.sayHi('Marc');

  3. グローバルに (HTML などで):

    <script src="mod.js"></script>
<script>mod.sayHi('Marc');</script>

このメソッドはもっと宣伝する必要があります - jQuery と co. それを使い始めて、人生はずっと楽になるでしょう！

于 2012-12-25T20:02:26.710 に答える
22

さまざまな相互互換性のあるモジュール形式のリストを次に示します。

あなたが探しているのは、彼らが「commonjsStrict.js」と呼んでいるものだと思います

于 2012-12-02T21:31:39.510 に答える
7

uRequire、Universal Module & Resource Converter はまさにそれを行うツールです。

  • 主にAMD と CommonJSをUMD / AMD / CommonJS / Plain スクリプトに変換します (AMD ローダーは不要です)。

  • これにより、組み込み済みのモジュールを宣言的にエクスポートできますnoConflict()。

  • ビルド時にモジュールを操作 (依存関係またはコードの挿入/置換/削除) できます。

  • それは、coffeescript、coco、Livescript、icedCoffeescript から変換し、1 つのライナーで独自の変換を追加できます!

于 2013-10-02T10:12:51.110 に答える
1

@marcに関してこの回答を少し更新するために、私もdedにクレジットを与え、最新の更新に合わせて少し更新しました：

(function (name, definition, context, dependencies) {
  if (typeof context['module'] !== 'undefined' && context['module']['exports']) { if (dependencies && context['require']) { for (var i = 0; i < dependencies.length; i++) context[dependencies[i]] = context['require'](dependencies[i]); } context['module']['exports'] = definition.apply(context); }
  else if (typeof context['define'] !== 'undefined' && context['define'] === 'function' && context['define']['amd']) { define(name, (dependencies || []), definition); }
  else { context[name] = definition(); }
})('events', function () {
  // Insert code here
  return {
    sayHi: function(name) {
      console.log('Hi ' + name + '!');
    }
  };
}, (this || {}));

最後のオブジェクトは、親または現在のスコープのいずれかへの参照です。たとえば、作成中のパッケージがあり、これはパイの一部にすぎないとします。コンテキストは名前空間オブジェクトである可能性があり、これは単なるそのパイのスライス。

また、依存関係が必要な場合は、配列をサポートするスコープの後にオプションのパラメーターがあります。この場合、定義パラメーターは各依存関係を引数として利用できます。また、便宜上、配列にリストされた依存関係が node-js プラットフォーム内で必要になります。

実際の例については、https ://gist.github.com/Nijikokun/5192472 を参照してください。

于 2013-03-18T23:41:42.520 に答える
0

私はこの正確な問題を解決し、簡単にサポートすることができました:

  • Dojo AMD (RequireJS 仕様を参照)
  • jQuery ($/jQuery.fn.[your_library_here] の下)
  • バニラを使用したnode.js require('path_to.js')
  • ブラウザ ウィンドウ。[your_library_here]

依存性注入とIIFEの組み合わせを使用して、仕事を成し遂げています。

下記参照：

/*global jQuery:false, window:false */
// # A method of loading a basic library in AMD, Node.JS require(), jQuery and Javascript's plain old window namespace.
(function(exporterFunction) {
exporterFunction('cll',
    function(a,b) {
        return a+b;
    }
);
})(
    (function() { // Gets an exportFunction to normalize Node / Dojo / jQuery / window.*

        if ((typeof module != 'undefined') && (module.exports)) { // Node Module
            return function(library_name,what_was_exported) {
                module.exports = what_was_exported;
                return;
            };
        }
        if (typeof define != 'undefined' && define.hasOwnProperty('amd') && define.amd) { // Dojo AMD
            return function(library_name,what_was_exported) {
                define(function() {
                    return what_was_exported;
                });
            };
        }
        if (typeof jQuery === 'function') { // jQuery Plugin
            return function(library_name,source) {
                jQuery.fn[library_name] = source;
                return;
            };
        }
        if (typeof window != 'undefined') { // Fall down to attaching to window...
            return function(library_name,what_was_exported) {
                window[library_name] = what_was_exported;
            };
        }

    })(),
    (function() { 
        // ## Other Parameters Here
        // You could add parameters to the wrapping function, to include extra 
        // functionalilty which is dependant upon the environment... See 
        // https://github.com/forbesmyester/me_map_reduce for ideas.
        return 'this_could_be_more_arguments_to_the_main_function'; 
    })()
);

パブリック Gist はhttps://gist.github.com/forbesmyester/5293746で入手可能

于 2013-04-02T16:45:54.093 に答える