webpackでCDNから取ってきたりした外部のjQueryなどを利用する方法
es6でモジュール化にするときは人気のwebpackを利用するケースが多くなってきました。(むしろこれが当たり前になってきましたw)
そこで、既にテンプレートが完成した状況でそこそこのボリュームのjsを書くことになりました。(例えば、wordpress中に個別ページにjsを使ったアプリを作る場合ですね)
既にCDNからjQueryをインストールされ、jQuryありきのコーディングだったのでこれを削除せずにwebpack内で、この外部のjQueryを利用したいと思いました。
webpackに外部のjQueryを使うように設定する
jQueryをCDNから使います
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
webpack.config.js内に次のプロパティを追加して下さい。
externals: { jquery: 'jQuery' },
これで、ビルドしたjsは外部の(グローバルのと言っていいのかな?)jQueryを引っ張ってきます。
使い方は、npm でインストールしたときと同様に
import jQuery from 'jquery'; //$を使いたい場合は↓で import $ from 'jquery';
とすればOK!
毎回importするのめんどくさい!!となればwebpack.config.jsに
const webpack = require('webpack'); module.exports = { /*中略*/ plugins: [ new webpack.ProvidePlugin( { jQuery: "jquery", $: "jquery", } ), ], };
これでimportしなくても使えます!