RequireJS load Wicket library

Question

マップ用のライブラリにWicketライブラリを使用しています。私はそれを正常にスクリプトタグとして参照すると、正常に動作します。次のように作業リンク。

https://arthur-e.github.io/Wicket/sandbox-gmaps3.html

私たちのプロジェクトがRequireJSをモジュールローダーに使用すると問題が発生します。

これは私が試した次のコードです。

require.config({  
    waitSeconds: 200, 
    paths: { 
     'wicket': '/Vendor/Wicket/wicket', 
     'wicketGmap3': '/Vendor/Wicket/wicket-gmap3' 
    }, 
    shim: { 
     wicket: { 
      exports: 'Wkt' 
     }, 
     wicketGmap3: {    
      deps: ['wicket'] 
     }   
    }, 
}); 
require(['wicket', 'wicketGmap3'],(Wkt) => { 
    $(() => { 
     angular.bootstrap(document, ['app']); 
    }); 
}); 

エラーは次のとおりです。

Uncaught ReferenceError: Wkt is not defined at wicket-gmap3.js:744

誰も同じ経験がありますか？

Answer 1

wicket.jsファイルにはdefineがコールされています。 shimは、非AMDの「モジュール」（すなわち実際にはモジュールではなく、あたかもあたかもあたかもあたかもあたかもあたかもあたかもあたかも動作したいファイル）にのみ意味があるので、shimを設定することは役に立たない。 AMDのモジュールはdefineと呼ばれます。

一方、wicket-gmap3.jsはAMDモジュールではありません。だからはにはshimが必要です。しかし、それはグローバル空間に存在するWktに依存します。 wicket.jsのロジックは、defineを呼び出すときに、グローバル・スペースにWktを設定しないようになっています。 （どちらもはで、正しく動作するAMDモジュールの正しい動作です）。自分でリークを実行する必要があります。

にあなたの設定を変更し

：私はwicket-glueという名前の新しいモジュールを追加しました

define("wicket-glue", ["wicket"], function (wicket) { 
    Wkt = wicket; // Deliberately leak into the global space. 
    return wicket; 
}); 

require.config({  
    waitSeconds: 200, 
    paths: { 
     'wicket': '/Vendor/Wicket/wicket', 
     'wicketGmap3': '/Vendor/Wicket/wicket-gmap3' 
    }, 
    map: { 
     '*': { 
      wicket: 'wicket-glue', 
     }, 
     'wicket-glue': { 
      wicket: 'wicket' 
     } 
    } 
    shim: { 
     wicketGmap3: {    
      deps: ['wicket'] 
     }   
    }, 
}); 

。私はしばしば、そのようなモジュールを追加のデータフェッチを必要としないようにコンフィギュレーションと一緒に配置します。必要に応じて別のファイルに置くこともできます。 （私がすることをしなかった場合、私はしかしdefineの最初の引数を削除したいとRequireJSはファイル名からモジュール名をとるようにファイルwicket-glue.jsに名前を付ける。）

私は基本的に」と言うmapをも追加しましたモジュールwicketが必要な場合は、代わりにwicket-glueをロードしますが、wicketが必要な場合はwicket-glueになります。ロードする場合はwicket "となります。

wicketが必要な場合、Wktはグローバルスペースにリークされ、wicket-glueは正常に動作するはずです。