Posted at

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

More than 3 years have passed since last update.

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