webpack入門_shimming

webpack

shimming

公式のドキュメントでShimmingを試してみたいと思います。
webpackの設定ファイルでProvidePluginを指定するとライブラリをグローバルに適用することができ、importなしでも使用することができます。例えばサードパーティ製のライブラリがjQueryを使用している場合などProvidePluginを使用することで解決ができるかもしれないです。

以下のjsファイルではlodashを使用していますがimportはコメントアウトされています。

// import _ from 'lodash';

function component() {
  var element = document.createElement('div');
  element.innerHTML = join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

この状態でビルドしてブラウザで表示してみるとコンソールでエラーが発生していることが確認できます。

次にwebpackの設定で以下のProvidePluginを指定します。

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      _: 'lodash'
    })
 ]
,,,

それからビルドして動作を確認したらエラーが発生しなくなるのが確認できます。

ライブラリ内の特定の関数のみをグローバルで使えるようにできます、lodashのjoinのみをグローバルで使えるようにする場合webpackの設定を以下のように配列で渡します。

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      join: ['lodash', 'join']
    })
 ]
,,,

この設定があればlodashのjoinが以下のようにjoinが使えます。

element.innerHTML = join(['Hello', 'webpack'], ' ');