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