webpackでビルドしたbundle.jsを外部から利用したい
webpackにてbundle.jsを生成したはいいけど別のJavaScriptからbundle.jsの中のモジュールを呼び出したいみたいなことはあるかとおもいます。もちろんbundle.jsに全部含めるのがベストというのは承知しているのですが、開発者の思惑の範疇を超えて後々からやむを得ない対応をしないといけないなどいろいろ理由がある場合もあります(要は本来は「知らんがな」な事案)。 特にbundle.jsの中にjqueryがあって、それを後から差し込んだJavaScriptでも利用したいんだけど「$」や「jquery」がundefinedになってしまい、無駄と分かっていてもやむを得ず多重読み込み(同じものを2度読み込む)するという自ら画竜点睛を欠いた対応を加えることになってしまいます。 そんなときにやりかた分からなかったら困るのでメモ。
環境
module | version |
---|---|
node | v8.10.0 |
webpack | v4.7.1 |
webpack.config.js
webpackの設定ファイルには以下のよう記述しました。
module.exports = { entry: { app: './src/js/index.js' }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' // 'window.$': 'jquery' }) ] };
"'window.$': 'jquery'" をコメントアウトとしていますが、これが効きませんでした。 これが効くとしている記事も散見されましたがもしかしたらwebpackのバージョンなどが合っていなかったのかもしれません。
index.js
エントリーとなるindex.jsにて以下のように記述していました。
var $ = require('jquery');
これを以下のように変更するとwindowにて読み込まれグローバルで「$」にてjqueryを参照できるようになりました。 また自作のJavaScriptについても同じ方法でグローバルに持ってくることができます。(本来ならやるべきではない、2度目)
var $ = window.$ = require('jquery'); var myModule = window.myModule = require('myModule.js');
最後に
他にいいやり方あれば知りたいです。 決してキレイなやり方ではないけどやむを得ない。そんな時を迎えないことを祈りつつ。