babelify v7.2.* で 'sourceType: module' エラーを回避

現象

gulpでbabelify v7.2.0をinstallしてトランスパイルしたら以下の様なエラーが発生した。

$ gulp
[18:24:05] Using gulpfile ~/hoge/gulpfile.js
[18:24:05] Starting 'browserify'...
[18:24:05] Finished 'browserify' after 25 ms
[18:24:05] Starting 'default'...
[18:24:05] Finished 'default' after 11 μs
Error : 'import' and 'export' may appear only with 'sourceType: module'

gulpfileは以下のとおり。

var gulp       = require('gulp'),
    browserify = require('browserify'),
    babelify   = require('babelify'),
    source     = require('vinyl-source-stream');

gulp.task('browserify', function() {
  browserify('src/index.js', { debug: true })
    .transform(babelify)
    .bundle()
    .on("error", function(err) {
      console.log("Error : " + err.message);
    })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./'))
});

gulp.task('default', ['browserify']);

解決策

browserifyのtransformの第2引数にpresetsを指定する。

.transform(babelify, {presets: ['es2015']})

Babel6.0.0からの仕様でpresetsを指定する形式になったらしい。babelifyはBabelのラッパーみたいなもののようで。

これを踏まえてpresetsをinstallし、browserifyのタスクは以下のように書くと良い。

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

gulp.task('browserify', function() {
  browserify('src/index.js', { debug: true })
    .transform(babelify, {presets: ['es2015']})
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })

所感

最近はあるバージョンから突然トランスパイルなどが動かなくなる時があるが、だいたいGitHubかNPMパッケージとかに書いてあるので真っ先に見ると良さそう。