19

RequireJSのシムを使用してHighchartsライブラリをロードしようとしています。ただし、Highchartsが読み込まれると、依存しているjQueryメソッドにアクセスできないため、例外がスローされます。

requireconfigは次のようになります。

require.config({
    baseUrl: "js",

    shim: {

        'libs/highcharts/highcharts.src.js': {
            deps: ['jquery'],
            exports: function(jQuery)
            {
                this.HighchartsAdapter = jQuery;

                return this.Highcharts;
            }
        }
    }
});

スローされる例外は次のとおりです。

Uncaught TypeError: undefined is not a function

そして、この行に関してです：

dataLabels: merge(defaultLabelOptions, {

問題はmerge呼び出しであり、最終的にはそれ自体をjQuery（またはHighchartsがサポートする他のアダプターですが、私はjQueryを使用しています）にマップし直します。

HighchartsがRequireJSとshimを使用してjQueryにアクセスできるようにする方法が正確にはわかりません。

誰かが以前にRequireJSとHighchartsを一緒に使用したことがありますか？この問題はhighchartsに固有のものではなく、他の種類の依存関係を持つライブラリに固有のものだと思います。

アドバイスや正しい方向へのポイントを事前に感謝します！

さらにコンテキストを追加するために、require.jsまたはshimsに精通している人が、highchartsに精通していなくても役立つことを期待して、Highchartsでこのmergeメソッドを設定するソースをいくつか示します。

var globalAdapter = win.HighchartsAdapter,
adapter = globalAdapter || {},

// Utility functions. If the HighchartsAdapter is not defined, 
// adapter is an empty object
// and all the utility functions will be null. In that case they are 
// populated by the
// default adapters below.

// {snipped code}

merge = adapter.merge

// {snipped code}

if (!globalAdapter && win.jQuery) {
    var jQ = win.jQuery;

    // {snipped code}

    merge = function () {
        var args = arguments;
        return jQ.extend(true, null, args[0], args[1], args[2], args[3]);
    };

    // {snipped code}
}

オブジェクトは、スクリプトの最初に設定winされた参照です。そのため、shimのexportメソッドにwindow追加すると、ハイチャートがjQuery参照を取得する結果になると思いました。window.jQuery = jQuery;しかし、そうではありませんでした。

繰り返しになりますが、この時点で洞察、情報、アドバイス、またはヘックルがあれば幸いです-私は完全に途方に暮れており、ブラウザのjavascriptにAMDパッケージシステムを実装しようとする価値があるかどうか疑問に思い始めています。

以下のpaberaからの回答を受け入れた後、彼の回答が私の解決策にどのように役立ったかを反映するように質問を更新することが適切だと思いました（ただし、基本的には彼の回答です）。

RequireJSは「パス」を使用して、「AMD」でサポートされていないライブラリを検索し、ページにロードします。「shim」オブジェクトを使用すると、パスで定義されたライブラリの依存関係を定義できます。requirejsが依存スクリプトをロードしようとする前に、依存関係をロードする必要があります。

exportsプロパティは、ライブラリがロードされているかどうかを判断する方法をrequirejsに指示するメカニズムを提供します。jquery、backbone、socketioなどのコアライブラリの場合、それらはすべてウィンドウレベルの変数（、、、などBackbone）ioをjQueryエクスポートします$。その変数名をexportsプロパティとして指定するだけで、requirejsはlibがいつロードされるかを判別できます。

定義が完了したら、期待どおりにrequirejs'define関数を使用できます。

これが私のサンプルrequire.configオブジェクトです：

require.config({
    baseUrl: "/js/",

    paths: {
        jquery: 'jquery',
        socketio: 'http://localhost:8000/socket.io/socket.io', //for loading the socket.io client library
        highcharts: 'libs/highcharts/highcharts.src',
        underscore: 'libs/underscore',
        backbone: 'libs/backbone'
    },

    shim: {
        jquery: {
            exports: 'jQuery'
        },

        socketio: {
            exports: 'io'
        },

        underscore: {
            exports: '_'
        },

        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },

        highcharts: {
            deps: ['jquery'],
            exports: 'Highcharts'
        }
    }
});

前に述べたように、これはRequire.JSバージョン用2.0.1です。

誰かがこれを利用してくれることを願っています。道路がしばらくの間私をブロックしたことを私は知っています。うまくいけば、これを投稿することで、壁の同じ場所に頭をぶつけないようにしました。

4

2 に答える 2

28

私はまったく同じ問題を抱えていて、ここであなたのエントリを見るまで何時間も苦労していました. それから私は最初からやり直しましたが、今では少なくとも私にとってはうまくいきます.

requirejs.config({
    baseUrl:'/js/',
    paths:{
      jquery:'vendor/jquery',
      handlebars: 'vendor/handlebars',
      text: 'vendor/require-text',
      chaplin:'vendor/chaplin',
      underscore:'vendor/underscore',
      backbone:'vendor/backbone',
      highcharts: 'vendor/highcharts'
    },

    shim: {
      backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      },
      underscore: {
        exports: '_'
      },    
      highcharts: {
        exports: 'Highcharts'
      }    
    },
});

Backbone の上でChaplinを使用しているため、paths 属性にさらにいくつかのファイルを含めています。Highcharts は Backbone と構造が似ているので、同じように読み込めると思いました。今はうまくいきます。ご覧のとおり、パス属性にハイチャートを導入して、シムのあとがきとしてエクスポートしています。

たぶんこれが役立つかもしれませんが、それ以外の場合は、問題を解決するためにさらに貢献してみましょう.

于 2012-06-12T12:17:58.987 に答える
2

jQuery は AMD モジュールとして使用できますが、とにかくそれ自体をウィンドウにエクスポートするため、jQuery が最初にロードされている限り、グローバルに依存するスクリプトjQueryまたはスクリプトは引き続き機能します。$

パスを設定してみましたか？jQuery は興味深いものです。なぜなら、RequireJS のドキュメントではモジュールに名前を付けないように勧められていますが、jQuery は実際に名前を付けているからです。

jQueryソースから

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define( "jquery", [], function () { return jQuery; } );
}

つまり、「jquery」の場所を RequireJS に伝える必要があります。そう：

require.config({
    paths: {
        'jquery': 'path/to/jquery'
    }
});

jQuery がこのように登録する理由に興味がある場合は、ソースにかなり大きなコメントがあり、詳細が説明されています。

于 2012-06-06T12:42:15.363 に答える