web-dev-qa-db-ja.com

Parcel(バンドラー)でjQueryとjQuery-uiを使用するにはどうすればよいですか?

Jquery(3.2.1)とjquery-ui-dist(1.12.1)をnpm経由でインストールしました。 (これらはHTMLのスクリプトタグとして含まれていません)

クライアントスクリプトでは、次を使用します。

window.$ = require('jquery');// plain jQuery stuff works fine
import 'jquery-ui-dist';     // breaks whole jQuery, with Error (missing module 8)
17
okram

今日、angularjsアプリと小包バンドラーで同様の問題が発生しました。パーセルは、外部モジュールで導入されたグローバル変数を(現時点では)うまく処理していないようです。他の問題の中で。

対処方法の1つ。次のようなインポートの代わりにプレーンなrequireを使用できます:

var jquery = require("jquery");
window.$ = window.jQuery = jquery; // notice the definition of global variables here
require("jquery-ui-dist/jquery-ui.js");

$(function() {
  $("#datepicker").datepicker();
});

インポートを使用する場合は、別のファイルを作成する必要があります。たとえば、import-jquery.js次のコンテンツ:

import jquery from "jquery";

export default (window.$ = window.jQuery = jquery);

メインファイルにインポートします。

import "./import-jquery";
import "jquery-ui-dist/jquery-ui.js";

$(function() {
  $("#datepicker").datepicker();
});

近い将来、これに対するサポートが改善されることを願っています。

30