Edited at

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

More than 3 years have passed since last update.


現象

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パッケージとかに書いてあるので真っ先に見ると良さそう。

https://github.com/babel/babelify