1

私はrequireJSをテストしており、ハイチャートを使用して簡単なプロジェクトを作成しようとしています. 出発点として、requireJS マルチページ サンプル プロジェクトから始めました。

私の dir 構造は基本構造と同じように見えますが、lib ディレクトリに highstock.js が追加されています。

  • page1.html : アプリのページ 1。
  • page2.html : アプリのページ 2。
  • js
    • app : アプリ固有のモジュールを格納するディレクトリ。
    • lib : jQuery などのサードパーティ モジュールを保持するディレクトリ。
    • common.js : requirejs 構成が含まれており、共通モジュール セットのビルド ターゲットになります。
    • page1.js : page1.html のデータメインに使用されます。共通モジュールをロードしてから、ページ 1 のメイン モジュールであるapp/main1をロードします。
    • page2.js : page2.html のデータメインに使用されます。共通モジュールをロードしてから、ページ 2 のメイン モジュールであるapp/main2をロードします。

common.js は構成を保持し、そこに highstock 用の shim を追加しました。

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app'
    },
    shim: {
        "highstock": {
            "exports": "Highcharts",
            "deps": [ "jquery"] 
        },
    } // end Shim Configuration
  } );

また、基本ビルド ファイルを使用しています。設定ファイルとして common.js を設定する行と、縮小を無効にする行を追加しています。

optimize: "none",
mainConfigFile: '../www/js/common.js',

apps/main1.js に を追加してvar HighCharts= require('highstock');、それを使用しようとしました。

これを通常のビルドで実行すると、すべて正常に動作します。すべての依存関係が保持され、すべてがロードされます。

ビルドを最適化しようとすると、highcharts は jQuery の依存関係を受け取りません。なぜそれが起こっているのかがわかると思いますが、それを修正する方法がわかりません。

私のビルドでは、common.js、page1.js、および page2.js の 3 つのファイルが作成されます。

ビルド出力の関連部分:

js/lib/../common.js
----------------
js/lib/../common.js
js/lib/jquery.js
...

js/lib/../page1.js
----------------
js/lib/../page1.js
js/lib/highstock.js
js/app/main1.js
...

私のページは、構築された page1 を参照します。highstock モジュールをロードしようとすると、jQuery がまだロードされていない/アクセスできないため、エラーが発生します。

ビルドされた page1 を見ると、その理由がわかります。

require(['./common'], function (common) {
    require(['app/main1']); //highcharts is in main1 in the non-optimized version
});

define("../page1", function(){});
//a few more defines

(function () { // start highcharts module definition HERE

そのため、共通 (jQuery を含む) がロードされた後にコールバックで定義されるのではなく、リクエストを行った後、コールバックが実行される前にロードされます。

私の質問は、コールバック内 (最適化されていないバージョンでロードされる場所) ではなく、なぜこれが発生するのかということです。build.js ファイルと構成ファイルで複数のオプションを試しましたが、いくつかの重要な概念または小さなエラーが欠落しているようです。

非常に長い質問で申し訳ありませんが、すべての情報が必要だと感じました. さらに情報が必要な場合は、投稿するか、余分なものを取り除くことができます。

4

2 に答える 2

0

あなたがまだプロジェクトに関わっているかどうかわからない:

path上記のコードではhighchartsライブラリにを定義していないようです。あなたが言及したレポでもそれを見ることができませんでした。

また、highchartsこの名前空間の再宣言を防止するため、別の名前を使用する必要があります。したがって、シム処理中に別の名前を使用する必要があります。

注:のようなライブラリはhighcharts、shim を使用せずに amd モジュールで安全に使用できます (それによってエクスポートされたオブジェクトへの明示的なアクセスが必要でない限り)。

したがって、構成ファイルは次のようになります。

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app',
        'highstock-custom-name': 'path/to/highcharts.js'
    },
    shim: {
        "highstock-custom-name": {
          ... //as is, although not necessary
        }
    }
});
于 2015-11-29T17:59:55.217 に答える
0

require js http://jsfiddle.net/wAM3h/を使用する非常に単純な例を見てください。

    require({
    paths: {
        jquery: "//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min",
        hchart: [
            "http://code.highcharts.com/highcharts",
            "http://code.highcharts.com/highcharts-more",
            "http://code.highcharts.com/modules/exporting"
        ]
    }
},
['jquery', 'hchart'], function($, hc) {

    window.chart = new Highcharts.Chart(options);
    });
于 2013-03-28T12:08:08.770 に答える