webpackでjQueryを読み込む2つの方法

すべてをひとつのJavaScriptへ

jQueryをwebpackで読み込むには

webpackでソースの管理・コンパイルをおこないながら、jQueryを活用したい場合があります。

【過去記事】webpack?なにそれ?よく分からん!ってなったのでこう考えてみた

まずはローカルにダウンロード

おっちょこちょいな私がよくやりがちなんですが、ソースそのものをローカルに落とすのすっかり忘れ、読み込みエラーが出てしまう。そして原因が分からずさまよう…(恥ずかしいったらありゃしない)。

まずはjQueryをnpmを使ってダウンロードします。

$ npm install --save-dev jquery

コードを分割しているとjQuery変数がundefinedとなってしまう

JavaScriptのソースコードの管理効率をあげるためにファイルを機能ごとなどに分割します。その際、下記のように分割されたファイルそれぞれでjQueryを必要とすることもあるかと思います。

// main.js

// webpack2.0以上
import $ from 'jquery';
import 'use-jquery-1.js';
import 'use-jquery-2.js';

// webpack2.0未満
$ = require('jquery');
require('use-jquery-1.js');
require('use-jquery-2.js');

しかしこれではうまく動きません。コンソールで「$ is not a function」とか言われてしまいます。

$をグローバルな変数として読み込む方法

コンパイルされたmain.jsの中身を見ると、webpackがそれぞれ分割したJavaScriptファイルをクロージャとして読み込んでいることが分かります。

そのため、1行目のimportで「$」に読み込まれたjQueryは、その後に読み込まれたコード(use-jquery-1.js, use-jquery-2.js)の中で参照することができないのです。

これをなんとか一度のjQuery本体の読み込みだけで参照できるようにならないか。

調べてみると、jQueryをグローバルに読み込む方法が何通りか挙げられていました。しかし、自分のケースでは上手く動作したものしなかったものがありました。それが以下の方法です。

【NG】window.$に読み込む

windowオブジェクトに渡してあげることでグローバルに使えるようになるという方法です。

先程のmain.jsでjQueryを読み込んだ後、グローバルなwindowオブジェクトにそれを渡すことで以降のファイルで「$」や「jQuery」が参照できるようになるということです。

import $ from 'jquery';
window.$ = $;
window.jQuery = $;

しかし私の場合、この方法でもコンソールに先程と同じエラーが出ました

【OK】webpack.config.jsのexternalsプロパティに指定

外部にホスティングされているjQueryパッケージを読み込んで使用する方法です。その際は、webpack.config.jsにexternalsプロパティを指定します。

module.exports = {
  ~ 省略 ~
  externals: [
    {
      jquery: 'jQuery'
    }
  ]
};

この方法では、HTML側でmain.jsを読み込む前にjQueryを読み込んでおく必要があります。

<!-- ホスティングされているjQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- webpackでコンパイルされたJavaScriptファイル -->
<script src="js/main.js"></script>

【OK】webpack.config.jsのpluginsプロパティでjQueryを読み込む

webpackの設定ファイル(webpack.config.js)でjQueryを読み込みます。この場合、main.js内の「import $ from ‘jquery’(または、$ = require(‘jquery’);)」は記述する必要はありません。

// main.js

// ここでjQueryファイルを読み込む必要はない
// $ = require('jquery');
require('use-jquery-1.js');
require('use-jquery-2.js');

// webpack.config.js

webpack = require('webpack');

module.exports = {
  ~ 省略 ~
  plugins: {[
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]}
// 余計な{}があり間違ってたので訂正。。。
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

まとめ

結果として、以下の2通りがwebpackでjQueryを読み込む方法として有効でした。

  • new webpack.ProvidePlugin()を使って読み込む
  • externalsプロパティを記述してホスティングされたパッケージを使う

さらにFont Awesomeをwebpackで読み込みたい場合も、便利な方法があります。

追記: Font Awesomeをwebpackで読み込む方法

(Visited 24,905 times, 1 visits today)