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

ページ目次

1 jQueryをwebpackで読み込むには
- 1.1 まずはローカルにダウンロード
- 1.2 コードを分割しているとjQuery変数がundefinedとなってしまう
2 $をグローバルな変数として読み込む方法
3 まとめ

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ファイルをクロージャとして読み込んでいることが分かります。

そのため、１行目の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を読み込んでおく必要があります。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  <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' }) ] };