Gulp4 + Babelでimport/exportを使えるようにするgulpfile.jsを作ってみた

先日、以下の記事でGulp+Babelの開発環境ついて紹介した。

gulp-babelというプラグインを使った非常にシンプルなGulp環境なのだが、この環境で開発を進めるにあたり、ある問題に遭遇した。

ES6ではクラスファイルを用意し、ファイル間でインポートやエクスポートを行うことが多いのだが、ES6のimport文を使うとBabeられたJSにrequire文が出力されてしまう。
既存ブラウザではrequire文はサポートされていないため、エラーが吐かれてしまうのだ。

Uncaught ReferenceError: require is not defined

この問題を解決するためにgulpfile.jsの設定を見直した。

babelify + browserifyをインストール

これまで利用していたgulp-babelプラグインだけでは不十分だったようだ。

新たにbabelifyとbrowserifyをインストールする。

npm install --save-dev babelify browserify

さらにbrowserifyタスクで必要となるプラグインも合わせてインストール。

npm install --save-dev vinyl-source-stream

gulpfile.jsの設定

gulpfile.jsにタスクを登録する。

const gulp = require('gulp');
const plumber = require("gulp-plumber");
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');

//setting : paths
const paths = {
  'jsDist': './js/',
  'jsMain': './src/main.js'
}

//gulpコマンドの省略
const { watch, series, task, src, dest, parallel } = require('gulp');

// browserify
task('browserify', (done) => {
  browserify(paths.jsMain, { debug: true })
    .transform(babelify)
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('bundle.js'))
    .pipe(dest(paths.jsDist))
  done();
});

これでタスクの登録は完了したが、このまま実行しても設定ファイルの不足でエラーが吐かれるはずだ。

Babelの設定ファイル .babelrcの作成

ルートディレクトリに「.babelrc」という名前で新規ファイルを作成しよう。

{
	"presets": [
		"@babel/preset-env"
	]
}

最後にこのプリセットをインストールする。

npm install --save-dev @babel/core　@babel/preset-env

これで「gulp browserify」を実行すると、import文を含むES6ファイルが、ブラウザ上で実行できるJSファイルとしてコンパイルされるはずだ。