Babel 6リリースで、ES7を使っているとwebpackが動かなくなる

10月30日にBabel 6がリリースされ、プラグイン化のためパッケージ構成が大きく変わったようです。これに合わせてES7などの構文もBabelのプラグインにりました。

僕のプロジェクトでは、Babel + webpackで開発していたのですが、この変更によりwebpackが動作しなくなってしまいました。

どんな問題が起きているか？

webpackの設定は次のようになっていて、babel-loader?stage=0でES7の構文も有効にしています。

webpack.config.js

module.exports = {
  entry: __dirname + "/src/js/main.js",
  output: {
    path: __dirname + "/dist/js",
    filename: "main.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, loader: "babel-loader?stage=0"}
    ]
  }
};

この設定で、ビルドしようとすると「Unknown option: base.stage」というエラーになってしまいます。

Hash: 553345561044745134b3
Version: webpack 1.12.2
Time: 410ms
    + 1 hidden modules

ERROR in ./src/js/main.js
Module build failed: ReferenceError: [BABEL] /suin/Dropbox/open/infinite/src/js/main.js: Unknown option: base.stage
    at Logger.error (/suin/Dropbox/open/infinite/node_modules/babel-core/lib/transformation/file/logger.js:43:11)
    at OptionManager.mergeOptions (/suin/Dropbox/open/infinite/node_modules/babel-core/lib/transformation/file/options/option-manager.js:245:18)
    at OptionManager.init (/suin/Dropbox/open/infinite/node_modules/babel-core/lib/transformation/file/options/option-manager.js:396:10)
    at File.initOptions (/suin/Dropbox/open/infinite/node_modules/babel-core/lib/transformation/file/index.js:191:75)
    at new File (/suin/Dropbox/open/infinite/node_modules/babel-core/lib/transformation/file/index.js:122:22)
    at Pipeline.transform (/suin/Dropbox/open/infinite/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
    at transpile (/suin/Dropbox/open/infinite/node_modules/babel-loader/index.js:12:22)
    at Object.module.exports (/suin/Dropbox/open/infinite/node_modules/babel-loader/index.js:69:12)

解決するために必要なこと

まず、Babelのプラグインを入れます。ひとつひとつ入れてもいいですが、es2015とstage-0があれば、"babel-loader?stage=0"と同等になるはずです。

npm install babel-loader babel-core babel-preset-es2015 babel-preset-stage-0 --save-dev

設定の書き方も変わったので、書き換えます。

webpack.config.js

module.exports = {
  entry: __dirname + "/src/js/main.js",
  output: {
    path: __dirname + "/dist/js",
    filename: "main.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, loader: "babel", query: {presets: ["es2015", "stage-0"]}}
    ]
  }
};

これでBabel6でもビルドできるようになります。