nagashigaki

フロントエンドや釣りで気になったことを記していきます。

webpackでCDNから取ってきたりした外部のjQueryなどを利用する方法

f:id:takuyantakuyan:20161201094313j:plain
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しなくても使えます!