ウェブサイト検索

jquery - webpack externals jqueryui と bootstrap


webpackの設定でexternalsセクションをどのように設定して、jqueryuiとbootstrapを出力から除外しますか?

webpack の設定:

externals: {
    'jquery': 'jQuery',
    'jqueryui': 'jqueryui',
    'bootstrap': 'bootstrap'
}

TypeScriptコード:

import 'jquery';
import 'jqueryui';
import 'bootstrap';

上記3つすべての型定義は @types/ フォルダにあります。jquery は問題なく動作しますが、他の2つは動作しません。実行時には、3つとも .html ファイルで script タグを使って読み込んでいるにもかかわらず、最後の2つが見つかりませんでした。jquery の webpack 設定は理解しています。jquery はライブラリ名で、jQuery はグローバル変数名です。混乱しているのは、jqueryui と bootstrap に対して "lib: global-var" の構文をどうやって動作させるかです。どちらもグローバル変数を持っていないからです。

回答 #1

「: true」メソッドは実際には機能しませんでした。'jqueryui not found' エラーが出ました。その後、私はこれを試しました:

externals {
    ...
    'jqueryui': 'jQuery',
    'bootstrap': 'jQuery'
}

それから動作しました。これら二つのライブラリは $を拡張します。これは動作しますが、__webpack_require_ がそれらの存在を確認しようとしないため、意図された方法ではないと思います。それは jQuery の存在にのみ依存しています。しかし、これは TypeScript と webpack のバンドルプロセスを満たしています。

回答 #2

誰かの役に立つかもしれないので、インターネットで二日間調べた後に私がそれを機能させた方法は次の通りです:

externals: {
    ...
    'jqueryui': true,
    'bootstrap': true
}

関連記事