web-dev-qa-db-ja.com

Webpack4でグローバルに追加のjQueryプラグインを含める

Webpack4を使用してjQueryプラグインをインラインJavaScriptにアクセスできるようにしようとしています。

PluginProviderを使用して、jQueryを自分のWebサイトで利用できるようにしています。

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

これは正常に機能しており、バンドルを含む任意のページからjQueryにアクセスできます。

次の内容の_vendor.js_というバンドルを作成して、 bootstrap-datepicker を追加しようとしました。

_import 'bootstrap-datepicker';
_

_vendor.js_バンドル内から$('input').datepicker()を呼び出すことはできますが、インライン_<script>_を使用して呼び出すと、次のようになります。

_Uncaught TypeError: $(...).datepicker is not a function
_

_bootstrap-datepicker_をグローバルスコープで使用できるようにWebpack 4を構成するにはどうすればよいですか？

[〜＃〜]更新[〜＃〜]

この問題を示すソースコードをここにアップロードしました： https://github.com/LondonAppDev/webpack-global-jquery-issue

問題は、2番目のバンドルインポートがdatpickerアドオンなしでjQueryを再追加していることであるようです。これを回避する方法はありますか？

javascriptjquerywebpackwebpack-4
6
LondonAppDev

私はこのタイプの問題で数ラウンド行って、 expose-loader で最も成功しました。 webpack構成で、次の公開ローダー構成を使用してjQueryのセクションを設定する必要があります。

{
    test: require.resolve('jquery'),
    use: [{
        loader: 'expose-loader',
        options: 'jQuery'
    }, {
        loader: 'expose-loader',
        options: '$'
    }]
},

同様のSO投稿がここにあります：

jqueryをwebpackにインポートする方法 （正規表現パターンが機能しませんでした）

jQueryをWebpackを使用して実際のWindowオブジェクトに公開します

Webpack 2のjqueryとbootstrapの読み込み、公開、バンドル

この構成を使用すると、他のいくつかの記事/投稿を見つけることができるはずです。これは、私がこれまでに正常に作業できるようになった唯一の記事です。

また、bootstrap 4はjQueryを内部的にロードまたは要求するようです。したがって、jQueryのインポート/要求とプラグインの後にインポートまたは要求を含めると、jQueryが再起動されて発生します。プラグインはスコープを失います。

13
Russell Shingleton