Posted at

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

More than 3 years have passed since last update.

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でもビルドできるようになります。