はじめに
webpackにはProvidePluginという(グローバル領域を汚染せずに)自動的にモジュールを読み込むプラグインがあります。
webpack.cofig.js
new webpack.ProvidePlugin({
$: 'jquery'
})
app.js
// $にjqueryが注入されている
$('#app');
これを使用すると、複数のスクリプトで
import $ from 'jquery'
などと書く必要がなくなり便利です。
ES Modules
例えばVue.jsのES Modules版で同様のことをやろうとした場合、
webpack.cofig.js
new webpack.ProvidePlugin({
Vue: 'vue/dist/vue.esm.js' //ES Modulesを指定
})
app.js
new Vue.default({
data: 'hello'
})
といった感じで書く必要があり、微妙...と思っていました。
あれ、読み込むプロパティを指定できるようになってる...!!!
素晴らしいPRが取り込まれてるので、
webpack.cofig.js
new webpack.ProvidePlugin({
Vue: ['vue/dist/vue.esm.js', 'default'] //ES Modulesを指定
})
app.js
new Vue({
data: 'hello'
})
おー、人間らしく書けるようになりましたね
履歴
- webpackのドキュメントを更新しました