34

troublesome(Webpack/Babel FWIWを使用して)呼び出す既存のライブラリをインポートしようとしているこの状況があり、jQueryモジュール構文を使用して解決しようとしているグローバル参照があります。

次の方法で、jquery をモジュールの「ローカル」スコープに正常にインポートしました。

import jQuery from 'jquery'

だから私は試しました：

import jQuery from 'jquery'    
import 'troublesome'

jQuery is not a functionしかし、おそらく驚くべきことではありませんが、キックバックのようなものが得られますtroublesome.js

私もこれを試しました：

System.import('jquery')
.then(jQuery => {
    window.jQuery = jQuery
})
import 'troublesome'

System.importしかし、これは es6/2015 仕様から引き出された、いわゆる「モジュールローダー」仕様の一部であることが判明したため、Babel では提供されません。poly-fillがありますが、Webpack は への呼び出しを介して実行される動的インポートを管理できませSystem.importん。

しかし...次のようにindex.htmlでスクリプトファイルを呼び出すと:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/troublesome/troublesome.js"></script>
<script src="the-rest-of-my-js.js"></script>

への参照jQueryは解決されてtroublesome.jsおり、問題はありませんが、スクリプト タグ ルートは webpack で管理されないため、避けたいと思います。

このようなシナリオに対処するための適切な戦略を推奨できる人はいますか?

アップデート

@TN1ck からのガイダンスにより、最終的にimports-loaderを使用して、Webpack 中心のソリューションを 1 つ特定することができました。

このソリューションの構成は次のようになります。

  //...
  module: {
    loaders: [
      //...
      {
        test: require.resolve('troublesome'),
        loader: "imports?jQuery=jquery,$=jquery"
      }
    ]
  }
4

6 に答える 6

0

jspm と dygraphs を使用して同様の問題が発生しました。私がそれを解決した方法は、あなたが使用しようとしたように動的読み込みを使用することでしたが、重要な部分は、グローバル名前空間変数を設定した後、promise onfulfillment ハンドラー (その後) 内で再度System.import使用して、連続する各「部分」をチェーンロードすることでした。System.import私のシナリオでは、実際にはthenハンドラー間でいくつかのインポート手順を分離する必要がありました。

jspm で機能しなかった理由、そしておそらくあなたにも機能しなかった理由は、import ... from ...構文がどのコードよりも前に評価され、間違いなくどのSystem.import非同期よりも前に評価されるためです。

あなたの場合、それは次のように簡単です：

import jQuery from 'jquery';

window.jQuery = jQuery;
System.import('troublesome').then(troublesome => {
 // Do something with it...
});

また、Systemモジュール ローダーの推奨事項は最終的な ES6 仕様から除外されており、新しいローダー仕様のドラフトが作成されていることにも注意してください。

于 2015-07-05T21:11:57.637 に答える
0
  1. 実行しnpm install import-loaderます。
  2. に置き換えimport 'troublesome'ますimport 'imports?jQuery=jquery,$=jquery!troublesome。

私の意見では、これがあなたの質問に対する最も簡単な解決策です。@TN1ck の質問に書いた回答に似ていますが、webpack の構成を変更する必要はありません。詳細については、https ://github.com/webpack/imports-loader を参照してください。

于 2016-11-23T01:06:18.010 に答える