web-dev-qa-db-ja.com

ES6 / 2015モジュールのインポートを使用して、「グローバル」スコープで参照を設定できますか？

私は既存のライブラリをインポートしようとしているこの状況があり、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がそれらを管理しないため、スクリプトタグルートを回避したいと思います。

誰でもこのようなシナリオに対処するための適切な戦略を推奨できますか？

update

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

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

  //...
  module: {
    loaders: [
      //...
      {
        test: require.resolve('troublesome'),
        loader: "imports?jQuery=jquery,$=jquery"
      }
    ]
  }
javascriptecmascript-6webpackes6-module-loader
34
tony_k

シミングモジュールを使用する方法です。 http://webpack.github.io/docs/shimming-modules.html

私はページから引用します：

プラグインProvidePlugin

このプラグインは、モジュールをすべてのモジュールで変数として使用できるようにします。このモジュールは、変数を使用する場合にのみ必要です。

例：require("jquery")を記述せずに、すべてのモジュールで$およびjQueryを使用可能にします。

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery"
})

これをwebpack-configで使用するには、このオブジェクトをconfigのpluginsという配列に追加するだけです：

// the plugins we want to use 
var plugins = [
   new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
   })
];

// this is your webpack-config
module.exports = {
    entry: ...,
    output: ...,
    module: ...,
    plugins: plugins
}
16
TN1ck

Es6/2015では、次のことを行いました。

import {jsdom} from 'jsdom';
import jQuery from 'jquery';
var window = jsdom(undefined, {}).defaultView;
var $ = jQuery(window);
//window.jQuery = $; //probably not needed but it's there if something wrong
//window.$ = $;//probably not needed but it's there if something wrong

その後、通常どおり使用できます

var text = $('<div />').text('hello world!!!').text();
console.log(text);

お役に立てれば。

2
Val

jQueryをモジュールにインポートしても、'troublesome'で使用できるようにはなりません。代わりに、jQueryおよびその他の必要な「グローバル」を提供する'troublesome'のシンラッパーモジュールを作成できます。

troublesome-module.js：

// Bring jQuery into scope for troublesome.
import jQuery from 'jquery';
// Import any other 'troublesome'-assumed globals.

// Paste or have build tool interpolate existing troublesome.js code here.

その後、あなたのコードで次のことができるはずです

import 'troublesome-module';
0
Noah Freitas

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

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

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

import jQuery from 'jquery';

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

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

0
Amit
  1. 実行npm install import-loader。
  2. 置換import 'troublesome' with import 'imports?jQuery=jquery,$=jquery!troublesome。

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

0
thisissami

シミングは問題なく、これを解決するさまざまな方法がありますが、私の答え here によると、最も簡単なのは、グローバルな依存関係を必要とするライブラリのロードにrequireを使用することです。ウィンドウを確認してください。割り当てはrequireステートメントの前であり、両方とも他のインポートの後です。順序は意図したとおりに維持する必要があります。この問題は、Babelがすべての他のコードの前に実行されるようにインポートを持ち上げることが原因です。

0
Ben Logan