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

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

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

## 現象
* gulp: 3.9.0
* babel-core: 6.0.14

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

```shell-session
[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/

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

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

| Presets    | パッケージ名          |
|:-----------|:---------------------|
| [es2015](http://babeljs.io/docs/plugins/preset-es2015/)     | [babel-preset-es2015](https://www.npmjs.com/package/babel-preset-es2015)  | 
| [stage-0](http://babeljs.io/docs/plugins/preset-stage-0/)    | [babel-preset-stage-0](https://www.npmjs.com/package/babel-preset-stage-0) |
| [stage-1](http://babeljs.io/docs/plugins/preset-stage-1/)    | [babel-preset-stage-1](https://www.npmjs.com/package/babel-preset-stage-1) |
| [stage-2](http://babeljs.io/docs/plugins/preset-stage-2/)    | [babel-preset-stage-2](https://www.npmjs.com/package/babel-preset-stage-2) |
| [stage-3](http://babeljs.io/docs/plugins/preset-stage-3/)    | [babel-preset-stage-3](https://www.npmjs.com/package/babel-preset-stage-3) |
| [react](http://babeljs.io/docs/plugins/preset-react/)        | [babel-preset-react](https://www.npmjs.com/package/babel-preset-react)   |

### .babelrcに利用するPresetsを指定

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

```json:.babelrc
{
  "presets": ["es2015"]
}
```

### 動作確認

```shell-session
[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系になってモジュールのパスが変わっていて動かなくなってた。
例えば、以下のようなエラーがでる。

```shell-session
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系を入れなおすと直ります。

```shell-session
$ 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](https://github.com/js-cli/js-interpret/blob/master/index.js)というモジュールを使って、`gulpfile`が`.babel.js`という拡張子だったら`babel-core/register`か`babel/register`をrequireするという感じになっている（たぶん）のでまた以下のようなエラーがでるようになった。

```shell-session
[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をインストール`

```shell-session
$ npm install babel-register --save-dev
```

- `babel-register`をrequireする

```js:gulpfile.babel.js
require( 'babel-register' ); // 追記
```

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