web-dev-qa-db-ja.com

RequireJS-shimの「exports」プロパティの目的は何ですか

以下のシムの「エクスポート」プロパティの目的は何ですか？本当に必要ですか？

requirejs.config({
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        }
    }
});

モジュールが依存関係リストに含まれている場合、エクスポートされた名前を関数の引数として再度指定します。

define(['backbone'], function (Backbone) {
  return Backbone.Model.extend({});
});
requirejs
49
Naresh

shimが例で使用されていない場合、BackboneはAMDに準拠せず、RequireJSが使用するオブジェクトを返さないため、パラメーターとして渡すBackboneオブジェクトは未定義になります。

define(['backbone'], function (Backbone) {
  // No shim? Then Backbone here is undefined as it may
  // load out of order and you'll get an error when
  // trying to use Model
  return Backbone.Model.extend({});
});

少しコンテキストを説明するために、r.jsオプティマイザーが出力するコードを使用しますが、この例では単純化します。オプティマイザーが生成するものを読むことで、そのポイントを理解するのに役立ちました。

シム化されたバックボーンは次のようになります。

// Create self invoked function with the global 'this'
// passed in. Here it would be window
define("backbone", (function (global) {
    // When user requires the 'backbone' module
    // as a dependency, simply return them window.Backbone
    // so that properites can be accessed
    return function () {
        return global.Backbone;
    };
}(this)));

ポイントは、モジュールを要求したときにRequireJSに返されるものを提供することであり、そうする前に最初にロードされるようにします。オプティマイザーの場合は、ライブラリを手前に埋め込むだけです。

35
Simon Smith

"export"Backboneを使用しない場合、backbone.jsで定義されているBackbone（window.Backbone）へのモジュールのロケール参照を取得できません。 。

//without export Backbone
shim : {
  'bbn':{
        //exports:'Backbone',
        deps:['underscore']
    },
    'underscore': {
        exports: '_'
    }
};


require(['bbn'], function(localBackbone) {
  //localBackbone undefined.
  console.log('localBackbone:,' localBackbone);
});

RequireJsの説明は次のとおりです。

//RequireJS will use the shim config to properly load 'backbone' and give a local
//reference to this module. The global Backbone will still exist on
//the page too.
define(['backbone'], function (Backbone) {
  return Backbone.Model.extend({});
});

RequireJSはshim configを使用してグローバルバックボーンを取得します

function getGlobal(value) {
        if (!value) {
            return value;
        }
        var g = global;
        each(value.split('.'), function (part) {
            g = g[part];
        });
        return g;
    }
29
Ian Jiang

また、「エクスポート」でプラグインの実際のエクスポートを使用する場合があることに注意してください。例えば、

requirejs.config({
    shim: {
        'jquery.colorize': {
            deps: ['jquery'],
            exports: 'jQuery.fn.colorize'
        },
        'jquery.scroll': {
            deps: ['jquery'],
            exports: 'jQuery.fn.scroll'
        },
        'backbone.layoutmanager': {
            deps: ['backbone']
            exports: 'Backbone.LayoutManager'
        },
        "jqueryui": {
            deps: ["jquery"],
            //This is because jQueryUI plugin exports many things, we would just 
            //have reference to main jQuery object. RequireJS will make sure to
            //have loaded jqueryui script.
            exports: "jQuery"  
        },
        "jstree": {
            deps: ["jquery", "jqueryui", "jquery.hotkeys", "jquery.cookie"],
            exports: "jQuery.fn.jstree"
        },
        "jquery.hotkeys": {
            deps: ["jquery"],
            exports: "jQuery"  //This plugins don't export object in jQuery.fn
        },
        "jquery.cookie": {
            deps: ["jquery"],
            exports: "jQuery" //This plugins don't export object in jQuery.fn
        }
    }
});

詳細： https://github.com/jrburke/requirejs/wiki/Upgrading-to-RequireJS-2.0#wiki-shim

2
Shital Shah

Shimエクスポートは、AMD以外のモジュールの処理方法をrequirejsに知らせるためのものです。これがないと、モジュールの起動中に、定義ブロックの依存関係がまだロードされます。リソースのロードを停止し、モジュールがリソースの使用を開始できることをrequirejsに通知します。

少なくとも、それは私がそれを見る方法です。

1
asgoth