ECMAScript 2015で書いたソースコードをJavaScriptに変換するための設定について。

Babelのインストール

npm install -g babel-cli

ES2015 presetのインストール

npm install --save-dev babel-preset-es2015

Babelの使い方

ファイルに変換する

ECMAScript 2015で書かれたファイル(sample.es6.js)を一般的なJavaScriptのファイル(sample.js)に変換する

babel sample.es6.js -o sample.js --presets es2015

「.babelrc」ファイルを作成して、設定を記述しておくこともできる。

{
  "presets": ["es2015"]
}

「.babelrc」に記述したので、「–presets es2015」のオプションを指定する必要がない。

babel sample.es6.js -o sample.js

変換して実行する

ECMAScript 2015で書かれたファイル(sample.es6.js)を変換して実行する。

babel-node sample.es6.js

ファイルの変更を監視する

ECMAScript 2015で書かれたファイル(sample.es6.js)を監視して、ファイルが変更されたら変換する。

babel -w sample.es6.js -o sample.js

babel-polyfillを使う

babel-polyfillをインストールする。

npm install --save-dev babel-polyfill

ソースコードに次の行を追加する。

import "babel-polyfill"

gulp-babelを使う

gulpをインストールする。

npm install --global gulp-cli
npm install --save-dev gulp

gulp-babelをインストールする。

npm install --save-dev gulp-babel

「gulpfile.js」ファイルを作成する。
srcフォルダーにあるjsファイルを変換して、distフォルダーに保存する設定です。

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () => {
    return gulp.src('src/**/*.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'));
});

gulpを実行する。
Babelが実行される。

gulp