babelify 更新時の Unknown option: base.optional while parsing file エラーを解決する

問題

とある Rails プロジェクトで、ES6 のトランスパイルに babelify を利用しています。そして、そのバージョンを v6.4.0 から v7.2.0 に更新した時に問題が起きました。

gulp build 実行時に以下の警告が表示されるようになったのです。

Unknown option: base.optional while parsing file

ちなみに gulp build タスクの内容は以下のとおりです。

gulpfile.coffee

gulp.task 'build', ->
  files = glob.sync('./frontend/javascripts/**/*.{js,coffee}')

  browserify
    entries: files,
    debug: true
  .transform(babelify.configure(optional: ['es7.functionBind'])
  .bundle()
  .on('error', (error) ->
    console.log(error.message)
    this.emit('end')
  )
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('app/assets/javascripts'))

原因

公式の GitHub に 該当する issue がありました。
そこでこう言及されていました。

optional isn't a valid option anymore. babelify 7.0 uses babel 6.0 and things changed a lot. Please read the README.

なるほど。依存する Babel のバージョンが 5.x から 6.x となり、仕様が大幅に変わったようですね。主な変更点は 6.x 以降は plugin あるいは preset を指定する必要があるとのことです。
次に babelify の README.md を読んでみると、やはり babelify の設定の記述形式も変わっていました。

解決

方法 1: gulpfile を更新する

gulp build タスクで transform の引数を以下のように変更します。

gulpfile.coffee

# 変更前
.transform(babelify.configure(optional: ['es7.functionBind'])

# 変更後
.transform('babelify', { presets: ['es2015', 'stage-0'] })

ES2015 preset の他に、Function Bind Syntax も利用したいので Stage 0 preset も追加しています。

これで gulp build が正しく実行できるようになりました。

方法 2: .babelrc ファイルを作成する

コメントで @nanila さんに教えて頂いた方法です。
.babelrc (僕の環境の場合は Rails プロジェクトのルートディレクトリに配置する) に以下の設定を記述します。

.babelrc

{
  "presets": ["es2015", "stage-0"]
}

次に gulpfile の gulp build タスクで transform の引数を以下のように変更します。

gulpfile.coffee

# 変更前
.transform(babelify.configure(optional: ['es7.functionBind'])

# 変更後
.transform('babelify')

以降、Babel に関する設定は gulpfile ではなく .babelrc に記述することにします。

Babel の設定は専用の設定ファイルに集約できたほうが都合がいいので、僕自身もこちらの方法に変更しました。