読者です 読者をやめる 読者になる 読者になる

青空コメントアウト

WEBのこと、デザインのこと、ご飯のこと、趣味のこと。青空の向こうの誰かに届きますように。

gulp + babel + browserify にコテンパンにされたので戦歴(対処歴)を残しとく

// WEB開発の話 // JavaScript

f:id:cocoro27:20160914230308j:plain 事の発端は「ウェブアプリのフロントをES6で書こう!」と意味もなく思い立ったこと。しかし思った以上に躓き箇所が多く、新しいライブラリとの出会い、別れ、葛藤を乗り越えることとなりました。そのドラマをここに残そうと思います。

ES6をブラウザで動かすときのハマりポイントと対処法です。




babelを実行しても変化なし

gulpでbabelを実行したら、エラーは出ないもののES6で書いたソースがそのまま書き出された。babelにくらった最初で最後の一撃。

原因と対処法

babel v6.0.0 以降の場合、pluginまたはpresetを.babelrc という設定ファイルに記述することが必須になったとか。設定ファイルは実行時に勝手に読みに行ってくれる。ありがとう。以下手順。

  1. presetパッケージのインストール npm install babel-preset-es2015
  2. .babelrcの作成。コマンドで行うなら touch .babelrc
  3. .babelrcに以下の設定を記述

まとめ

babeるときは設定ファイル.babelrcが必要でした。
参考にしたサイト:Babelを6系にアップデートしたらgulpでこける - Qiita




babeったソースがブラウザでエラーになる

やっとこさbabelがうまく動いたもののexports is not defined とかrequire is not definedとかConsoleに吐かれてる。

原因と対処法

実はBabelはimport / export構文をrequire構文に変換してくれるものだった!(てっきりES6がブラウザで実行できる状態になるものだと思っていた) ブラウザはrequire構文に対応していないためこのままじゃ動きません(怒)。おこ。激しくおこ。

require構文についてはこれ見て。

ブラウザ対応させるにはBrowserifyさんのお力を借りよう!

Browserifyとは
モジュール間の依存関係(require構文による関係等)を解決したり、ファイルの結合をしたりするビルドツール。ここでは「Node.jsがないと動かないrequire構文を、ブラウザでも動くように変換してくれるもの」と思っておけばOK。

話の流れ的に①Babeる、②Browserifyる、という手順に見えるけれど、BrowserifyはBabeることもセットでやってくれる(ビルドツールな)ので、まとめてお願いしましょう。お願いするために拡張パッケージのBabelifyを使う。ちなみに、似た名前のgulp-browserifyはブラックリスト入しているパッケージなので使わない!!!

そうしてできあがったgulpfile.jsがこちら。 ※2016/09/13時点でこのソースは動きません。詳細は後述の「Browserifyがエラーで動かない」に。

まとめ

Babelはimport/exportをrequire構文に変換するのでブラウザじゃ動かない。ブラウザで動かすにはBrowserifyが必要。

余談

gulpは対象のファイルをバイナリにしてゴチョゴチョとタスクを消化していきます。でもBrowserifyはそうではないので変換が必要。変換にはvinyl-source-streamvinyl-transfotmが有効で、上のgulpfile.jsだと10行目がソレです。
参考にしたサイト:gulp と browserify と vinyl の話 - <body>

一応vinyl-transformを使った場合を載せとくけれど、これも動かない。




Browserifyがエラーで動かない

バイナリがどうとか細かいところまで悪戦苦闘したのに、Browserifyを実行するとエラーになる(死)。

_stream_readable.js:536
    var ret = dest.write(chunk);
                   ^

TypeError: dest.write is not a function
    at Producer.ondata (_stream_readable.js:536:20)
    at emitOne (events.js:77:13)
    at Producer.emit (events.js:169:7)
    at Producer.Readable.read (_stream_readable.js:368:10)
    at flow (_stream_readable.js:751:26)
    at resume_ (_stream_readable.js:731:3)
    at nextTickCallbackWith2Args (node.js:442:9)
    at process._tickCallback (node.js:356:17)
原因と対処法

Browserify#bundleの返り値が変わったことが原因。つまりどこかのバージョンまでは上記のgulpfile.jsで動いた(はず)。この情報がなかなか見つからずハマったもんで、うんざりしてBrowserifyを使うことをやめた(怒)。
対処法が載っているサイト:Browserify+gulpで、JavaScriptを個々のファイルとしてビルドする(**/*.js) - CLOVER

まとめ

あろえはBrowserifyと縁を切った。

余談

browserifyのサンプルを見ていると、1ファイルを対象としているものばかり。あるフォルダにあるものをまるっと変換したいのに…。と思ったら、複数ファイルを対象にするのは苦手のよう(やろうと思えば一応できるが気が利かない)。よって縁を切る理由が増えた。さようなら。




結局 webpack + babel でbabeる

さよならgulp!!(他のタスクと組み合わせるときにはもう一度活躍するからね…!) というわけで、webpackというビルドツールとbabelを組み合わせてついにbabeった。

方法
  1. webpackのインストール npm install webpack
  2. 諸々インストール npm install babel-core babel-loader babel-preset-es2015
  3. 設定ファイルwebpack.config.jsを用意
    参考にしたサイト:webpack.config.jsの読み方、書き方 - dackdive's blog
  4. webpackを実行 webpack
まとめ

webpackさまさま。でも設定ファイルがややめんどい。でもでも設定さえこなせばgulp使わなくてもいろいろできるようになるから感謝。謝謝。




おわりに

濃密な3時間でした。イマドキのライブラリはVerUp頻度が高いので情報が古くなりがち。みなさんもどうかお気をつけて。

TOP