Laravel-Elixirのbrowserifyを使った時のbabelのpluginsの編集方法

Reactを勉強しようと思って、
laravel-elixirを利用してjsの変換等をやっていたのですが、Babel6からexport defaultの挙動が変わった関係でbabel側のpluginを編集する必要が出てきました。

環境

• Laravel 5.1
• Laravel-Elixir ~4.0

Babelがバージョンアップした関係で出てきた問題点

export default Class名;

でモジュールを登録すると、require('Class名').defaultと呼ばないとクラスが取得できない。

この辺りの話はjserの人が詳しいので、
http://qiita.com/59naga/items/10ec2b5ef0fd62a5b437
見ると良いと思います。

Laravel-Elixirでの設定の編集方法

恐らくあまり知られてないのがLaravel-Elixirの設定はどう編集するのかという点。
実際のところ、elixir.configでconfigにアクセス出来ます。
Configファイルは、node_modules/laravel-elixir/Config.jsにあります。

browserifyのオプションでbabelのpluginを読ませる

browserifyの箇所を確認してみると、いい感じにコメントが書かれていますね。transformerと言う所で、babelifyとpartialifyが定義されてます。

あとはbabelifyの方のoptionにpluginを追加するだけです。

今回は問題点であった部分を解消するためにbabel-plugin-add-module-exportsを利用します。

npm install babel-plugin-add-module-exports --save-dev

あとは、gulpfile.jsに以下のconfigを上書きする処理を書きましょう。

elixir.config.js.browserify.transformers
  .find(transformer => transformer.name === 'babelify')
  .options.plugins = [
    'add-module-exports'
    ];

処理に関しては
https://github.com/laravel/elixir/issues/376
こちらのissueを参考にいたしました。

なお、次期バージョンではadd-module-exportsは必要なくなりそうです。
http://qiita.com/59naga/items/10ec2b5ef0fd62a5b437