Babelを6系にアップデートしたらgulpでこける #JavaScript

gulpの3.9.0からES6でタスクを記述できるようになったので使っていたけど、
Babelの6系にアップデートしたら動かなくなった。

※ぼーっとしてたら最近いろいろアップデートされてていろいろ動かなくなっているので下の方に追記(2016/01/26)

現象

gulp: 3.9.0
babel-core: 6.0.14

以下のようにgulpコマンドでdefaultタスクを実行しようとしたところ
importなんてしらない！と怒られる。。

[sawapi: ~/dev/git/sawapi/mw]$ gulp
[17:11:48] Requiring external module babel-core/register
/home/sawapi/dev/git/sawapi/mw/gulpfile.babel.js:3
import requireDir from 'require-dir';
^^^^^^
SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at loader (/home/sawapi/dev/git/sawapi/mw/node_modules/babel-core/lib/api/register/node.js:136:5
)
    at Object.require.extensions.(anonymous function) [as .js] (/home/sawapi/dev/git/sawapi/mw/node_modules/babel-core/lib/api/register/node.js:146:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Liftoff.handleArguments (/home/sawapi/.nodebrew/node/v0.12.2/lib/node_modules/gulp/bin/gulp.js:116:3)
    at Liftoff.<anonymous> (/home/sawapi/.nodebrew/node/v0.12.2/lib/node_modules/gulp/node_modules/liftoff/index.js:192:16)

原因

原因を調べてみると、どうやらBabelの6系からPresets(またはPlugin)を指定しないといけないみたい。
https://babeljs.io/docs/plugins/

Babelの5系では、babelをインストールするとすべての機能が揃った状態（stage-0とかを利用する場合はオプションで別途指定します）でしたが、Babelの6系ではBabelをインストールしても本体のみで、使いたい機能を別途Presets( ES2015、stage-3とかReact )という単位でインストールするかPlugin( 機能単位 )でインストールし、.babelrcで指定する必要があります。

対応方法

利用しているPresetsをインストールする

今回自分の環境の場合は、ES2015しか使っていないのでbabel-preset-es2015をインストールしました。
http://babeljs.io/docs/plugins/preset-es2015/

[sawapi: ~/dev/git/sawapi/mw]$ npm install babel-preset-es2015 --save-dev

Reactやstage-[0-3]を利用している場合は適宜インストールしましょう。
インストールできるPresetsは以下のとおりです。

Presets	パッケージ名
es2015	babel-preset-es2015
stage-0	babel-preset-stage-0
stage-1	babel-preset-stage-1
stage-2	babel-preset-stage-2
stage-3	babel-preset-stage-3
react	babel-preset-react

.babelrcに利用するPresetsを指定

利用するPresetsを.babelrcに記述します

.babelrc

{
  "presets": ["es2015"]
}

動作確認

[sawapi: ~/dev/git/sawapi/mw]$ gulp
[17:24:04] Requiring external module babel-core/register
[17:24:07] Using gulpfile ~/dev/git/sawapi/mw/gulpfile.babel.js
[17:24:07] Starting 'connect'...
[17:24:07] Finished 'connect' after 7.76 ms
[17:24:07] Starting 'webpack-dev'...
[17:24:08] Starting 'watch'...
[17:24:08] Finished 'watch' after 5.68 ms
[17:24:08] Server started http://localhost:8001
[17:24:08] LiveReload started on port 35729
[17:24:08] Version: webpack 1.12.2
  Asset     Size  Chunks             Chunk Names
main.js  15.5 kB       0  [emitted]  main
[17:24:08] webpack is watching for changes

問題なさそうです！

まとめ

Babelの6系からPresetsという単位で管理するようになり、より便利になった？みたいです。
まあ、Reactとか使わない人には必要ないし、必要なものだけインストールするというのはいいかも。
それにしても、最近JavaScriptとかNodeJSまわりの動きが早すぎてそろそろ年寄りにはついていけなそうです。。(´・ω・｀)

追記(2016/01/26)

npm-check-updatesを使って調子こいてアップデートしてたらまた動かなくなった

lodashが4系になっていろいろ動かなくなっている

lodashが4系になってモジュールのパスが変わっていて動かなくなってた。
例えば、以下のようなエラーがでる。

Error: Cannot find module 'lodash/lang/isFunction'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)

これは、3系ではlodash/lang/isFunctionというパスで指定できたが4系ではlodash/isFunctionというパスで指定するようになったことでおきるエラー。
lodashのリリースノートを見るとパスの指定をシンプルにしたよ☆（ゝω・）vｷｬﾋﾟみたいなことが書いてある(´・ω・｀)
ということで、lodashの4系が入っている場合は3系を入れなおすと直ります。

$ npm install lodash@v3.10.1 --save-dev

gulpを実行すると「Failed to load external module babel-core/register」と怒られる

これまでbabel-core/registerをrequireするとbabelでES5に変換するようになっていたがいつの間にかbabel-registerという新しいモジュールができていてこちらをrequireするようになってた。(気づいてなかっただけ？)
gulp3.9.0では、ちゃんとソース追ってないけどinterpretというモジュールを使って、gulpfileが.babel.jsという拡張子だったらbabel-core/registerかbabel/registerをrequireするという感じになっている（たぶん）のでまた以下のようなエラーがでるようになった。

[sawapi: ~/dev/git/sawapi/mw]$ gulp
[23:36:35] Failed to load external module babel-core/register
[23:36:35] Failed to load external module babel/register
/Users/sawapi/dev/git/sawapi/mw/gulpfile.babel.js:3
import requireDir from 'require-dir';
^^^^^^

こちらに関しては暫定対処として以下のように対応した。

babel-registerをインストール

$ npm install babel-register --save-dev

babel-registerをrequireする

gulpfile.babel.js

require( 'babel-register' ); // 追記

これで動くようになりました(｀・ω・´)