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

  • 129
    いいね
  • 3
    コメント
この記事は最終更新日から1年以上が経過しています。

主な変更点

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

Setting up Babel 6

  • ES6,React変換等が別パッケージに移動されました。
    • Plugin・Presetsとして提供
  • "babel"パッケージは何も仕事をしなくなりました

各プリセット

パッケージ名 ドキュメント
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を追加するだけのプラグインを作った

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