先日、以下の記事で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ファイルとしてコンパイルされるはずだ。