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

主な変更点

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

Setting up Babel 6

• ES6,React変換等が別パッケージに移動されました。
  • Plugin・Presetsとして提供
• "babel"パッケージは何も仕事をしなくなりました
  • CLI: babel-cli
  • Polyfill: babel-polyfill
  • その他API: babel-core

各プリセット

パッケージ名	ドキュメント
babel-preset-es2015	ES2015 preset
babel-preset-stage-0	Stage 0 preset
babel-preset-stage-1	Stage 1 preset
babel-preset-stage-2	Stage 2 preset
babel-preset-stage-3	Stage 3 preset
babel-preset-react	React preset

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

preset-es2015を使用したい

$ npm install babel-preset-es2015

CUIのインストール

# npm install --global babel-cli

.babelrc

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

$ npm install babel-preset-es2015

.babelrc

{
    "presets": ["es2015"]
}

Require Hook

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

以前のコード

require("babel/register");  // Bad Code!!

バージョン指定有り

require("babel-core/register")({
    "presets": ["es2015"]
});

.babelrcのバージョン指定を使用する例

require("babel-core/register");

Polyfill

以前のコード

require("babel/polyfill");  // Bad Code!!

babel6以降でのコード

require("babel-polyfill");

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

インストール

$ npm install --save-dev babel-polyfill

Webpack

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

以前の設定

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

バージョン指定を行う例

loaders: [
    {
        test: /\.(js)$/,
        exclude: /node_modules/,
        loader: 'babel?presets[]=es2015'

    }
]

.babelrcのバージョン指定を使用する例

loaders: [
    {
        test: /\.(js)$/,
        exclude: /node_modules/,
        loader: 'babel'
    }
]

Gulp

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

バージョン指定を行う例

.pipe(babel({
    presets: ['es2015']
}))

.babelrcのバージョン指定を使用する例

.pipe(babel())

CommonJS

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

lib.js

export default "str";

befor.js

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

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

@59naga さんから頂いたコメントのプラグインを使用するとなんとかなるみたいです babel6にmodule.exportsを追加するだけのプラグインを作った

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