JavaScript
Node.js
gulp
babel

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

More than 3 years have passed since last update.


主な変更点

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を追加するだけのプラグインを作った

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