webpack.ensureとbabelでハマりがちなこと

以前qiitaのほうで webpackのrequire.ensureでDynamic Loadingをして大規模アプリケーションを作る という記事を書いたのですが、babel-loaderと組み合わせるとちょっと癖があってハマったのでここで補足をしようかなと思います。

import/exportとwebpack.ensureの組み合わせが悪い件

webpackでimport/exportは仕様に含まれていないので当然webpack.ensureのように遅れてファイルを読み込ませたいときにはES6 Modulesではなくwebpackのrequireを使う必要があります。

どうもバベってる時にimport文等を使おうとするとrequireが上書きされて上手くコンパイルしてくれない。そんな時の対処法としてあげられるのが以下２つ。

• requireで読み込ませるところだけ .babelrc でignoreさせて上書かない
• コメントで教えていただいたbundle-loaderを使って依存を解決させる

最初の.babelrcに関しては

{
  (略)
  "ignore": [
     "src/routes/*/index.js"
   ]
}

こんな感じで特定のファイルだけ無視するように設定する。（だいたいラウティングの時に使っているので法則性で書けるケースが多いと思います）

次にbundle-loaderに関してですが、webpackのmiddlewareになってES6 Modulesでも使えます。

例:

// hoge.js
export default 'hoge';
export const foo = 'foo';

// use
import loadFunc from 'bundle?lazy&name=hoge!./hoge.js';

loadFunc((result) => {
  console.log(result); // => { default: 'hoge', foo: 'foo', __esModule: true }
});

ただし、読み込み先でのexportに関してはwebpack.ensureの仕様から外れるため通常とは異なる仕様で結果が返却されるので注意が必要です（特にdefaultを使うときには）。

.babelrcに余計な記述をしたくないとか、コードに一貫性持たせたいときとかは使ってみても良いかもしれませんね。