131
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

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

主な変更点

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
131
Help us understand the problem. What are the problem?