babel6での変更点　Gulp・Webpackの設定

# 主な変更点

babel6になりパッケージの分離が行われました。

[Setting up Babel 6](http://babeljs.io/blog/2015/10/31/setting-up-babel-6/)

- ES6,React変換等が別パッケージに移動されました。
    - Plugin・Presetsとして提供
- "babel"パッケージは何も仕事をしなくなりました
    - CLI: [babel-cli](https://babeljs.io/docs/usage/cli/)
    - Polyfill: [babel-polyfill](https://babeljs.io/docs/usage/polyfill/)
    - その他API: [babel-core](https://babeljs.io/docs/usage/api/)

### 各プリセット

パッケージ名 | ドキュメント
---|---
[babel-preset-es2015](https://www.npmjs.com/package/babel-preset-es2015) | [ES2015 preset](http://babeljs.io/docs/plugins/preset-es2015/)
[babel-preset-stage-0](https://www.npmjs.com/package/babel-preset-stage-0) | [Stage 0 preset](http://babeljs.io/docs/plugins/preset-stage-0/)
[babel-preset-stage-1](https://www.npmjs.com/package/babel-preset-stage-1) | [Stage 1 preset](http://babeljs.io/docs/plugins/preset-stage-1/)
[babel-preset-stage-2](https://www.npmjs.com/package/babel-preset-stage-2) | [Stage 2 preset](http://babeljs.io/docs/plugins/preset-stage-2/)
[babel-preset-stage-3](https://www.npmjs.com/package/babel-preset-stage-3) | [Stage 3 preset](http://babeljs.io/docs/plugins/preset-stage-3/)
[babel-preset-react](https://www.npmjs.com/package/babel-preset-react) | [React preset](http://babeljs.io/docs/plugins/preset-react/)

使用の際は、自分でインストールする必要があります。

```shell-session:preset-es2015を使用したい
$ npm install babel-preset-es2015
```

### CUIのインストール

```shell-session
# npm install --global babel-cli
```


# .babelrc

変換を行う際のバージョン指定をこちらで行うのが便利です。package.jsonと同じ場所に設置してください。

```shell-session
$ npm install babel-preset-es2015
```

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

# Require Hook

使用するとES6などのファイルをrequire出来るようになるものです。

```js:以前のコード
require("babel/register");  // Bad Code!!
```

```js:バージョン指定有り
require("babel-core/register")({
    "presets": ["es2015"]
});
```

```js:.babelrcのバージョン指定を使用する例
require("babel-core/register");
```

# Polyfill

```js:以前のコード
require("babel/polyfill");  // Bad Code!!
```

```js:babel6以降でのコード
require("babel-polyfill");
```

使用する際には、パッケージのインストールが必要です。

```shell-session:インストール
$ npm install --save-dev babel-polyfill
```


# Webpack

babel-loaderを使用する際の設定です。babel-loaderは6.0.0以降にアップデートしてください。

```js:以前の設定
loaders: [
	{
		test: /\.(js)$/,
		exclude: /node_modules/,
		loader: 'babel?optional[]=runtime&stage=0'  // BAD SETTING!!
	}
]
```

```js:バージョン指定を行う例
loaders: [
	{
		test: /\.(js)$/,
		exclude: /node_modules/,
		loader: 'babel?presets[]=es2015'

	}
]
```

```js:.babelrcのバージョン指定を使用する例
loaders: [
	{
		test: /\.(js)$/,
		exclude: /node_modules/,
		loader: 'babel'
	}
]
```


# Gulp

gulp-babelを6.0.0以降にアップデートしてないと、"presetsって何!?"って怒られます。

```js:バージョン指定を行う例
.pipe(babel({
	presets: ['es2015']
}))
```

```js:.babelrcのバージョン指定を使用する例
.pipe(babel())
```


# CommonJS

`export default` したモジュールを `require` で呼び出す際の方法が変更されました。

```js:lib.js
export default "str";
```

```js:befor.js
var str = require("./lib.js").default;  // defaultの指定が必要になった
```

BabelのIssueにも上がっていますが、プラグイン自分で作れば？って感じです　https://github.com/babel/babel/issues/2212

@59naga さんから頂いたコメントのプラグインを使用するとなんとかなるみたいです [babel6にmodule.exportsを追加するだけのプラグインを作った](http://qiita.com/59naga/items/10ec2b5ef0fd62a5b437)

暫くの間動かないコード掲載していて申し訳ないです…