2016-07-17 1 views
5

ここでnpmにいくら新しいですか。npmをインストールしてjQuery-uiとjQueryをインポートする

私のプロジェクトではjQuery-uiを使いたいと思います。私はHTMLにスクリプトタグを付けてjQueryとjQuery-uiの両方をインポートするのに慣れていますが、npm installを使って両方をインポートしたいと思います。

私はjQueryと連携しています。

import $ from 'jquery' 

しかし、私はjquery-uiをインポートしようとするたびに私はこのエラーを取得する:

Uncaught ReferenceError: jQuery is not defined

このエラーについての記事がたくさんあります。しかし、それらのすべては、jQueryとjQuery-uiのスクリプトタグを間違った順序で入れているだけの人々に集中しているようです。

npmをインストールしてjQueryとjQuery-uiをインストールする方法が見つかりませんでしたか?

アイデア?

+0

ブラウザまたはNode.jsを使用していますか? –

+0

私はNode.jsを使用しています – MLyck

+0

jQueryがNodeで動作するためには、文書があるウィンドウが必要です。そのようなウィンドウはNodeにネイティブに存在しないので、jsdomのようなツールを使って嘲笑することができます。フォームの詳細については、https://www.npmjs.com/package/jquery –

答えて

8

ジャスト(3.1.0まで)jqueryの & jqueryの-UI(1.12.0へ)を更新しようとした非常に同じエラーを得ました。 jqueryの-UI

新しいバージョンで初期化するか、jqueryのの新しいバージョンが故にキャッチされないにReferenceError、もはやデフォルトでjQueryグローバル変数を設定していないグローバルjQuery変数を必要とするようです。

インポートする前に、明確な解決策はglobal.jQuery = require('jquery')です。jquery-uiです。

browserifyは(輸入はそれらが元のコードでは、他の式の後ろに置かれた場合でも、browserifiedコードの上に配置されている)他の式を超える輸入を優先しているので、しかしbrowserifyのために動作するようには思えません。

import $ from 'jquery'; 
import 'jquery-ui'; 

が私の仕事:よう

あなたはbrowserifyを使用している場合は、2.2.4 @jqueryのjqueryの-UI 1.10.5 @を試し、その後、インポートします。

+0

larvel/gulp/webpackで動作します。 – Kingsley

3

ウェブパックで使用する。

import $ from 'jquery' $を、現在のモジュール内のローカル変数として$をとして使用できるように、$にjqueryモジュールのデフォルトプロパティを渡します。しかし、jquery-uiはamdのみをサポートしていますので、importを使用すると、グローバルなjQueryを$ insideとして使用し、モジュールのコンストラクタで関数を実行します(ソースコードを調べることができます)。

どうすればよいですか? jQueryグローバル変数とします。WebPACKの使用

マイウェイ:

1は唯一の変数はグローバルであることを作るための方法を提供し、あなたが

import 'jquery-ui/ui/widgets/datepicker' 
import 'jquery-ui/themes/base/core.css' 
import 'jquery-ui/themes/base/datepicker.css' 
import 'jquery-ui/themes/base/theme.css' 

2 WebPACKのコンフィグ

{ 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     '$': 'jquery', 
     'jQuery': 'jquery', 
     'windows.jQuery': 'jquery', 
    }), 
    ], 
} 

ProvidePluginを使用するモジュールをインポートします変数。だからあなたがProvidePluginを使用した後、$jQuerywindow.jQueryはモジュールで直接使用することもできます。import $ from 'jquery'。あなたはWebPACKを使用しない場合

ProvidePlugin: Automatically load modules instead of having to import or require them everywhere.

しかし、ちょうどあなたがグローバル変数jQueryを提供しなければならないことを覚えておいてください。例:

import $ from 'jquery' 
window.jQuery = $ 

このコードを入力してください。これは、使用しているコンパイルシステムによって異なります。

関連する問題