2017-07-27

Browserify + Babelify + Babel-Preset-ES2015 で ES2015 をトランスパイルして1つのファイルに結合する

前回 Gulp-Sass で SCSS をビルドし、1ファイルの CSS ファイルを生成したが、今回はそれの ES2015 版。

Gulp-Sass と Gulp-SourceMaps でソースマップを含んで SCSS ファイルをビルドする

お馴染み Browserify で複数のファイルを1つにまとめるのだが、その際にトランスパイルするためのツールを間に挟み込むことができる。そのツールとして Babelify を指定し、Babelify が使用するトランスパイルの設定情報として、Babel-Preset-ES2015 というパッケージを読み込む、という関係。

何はともあれ npm install。

$ npm gulp gulp-load-plugins browserify babelify babel-preset-es2015 vinyl-source-stream

Browserify を使う時は、変換されたファイルの形式が Gulp 内で扱う形式にそぐわないので、Vinyl-Source-Stream というパッケージで形式を変換してやる、という。コレ前に調べて記事書いたと思うんだけど詳しいことは忘れた。とりあえずそういうもんだと思え。w

というワケで gulpfile.js。

const gulp = require('gulp');

// Gulp-Load-Plugins で Browserify と Vinyl-Source-Stream を読み込む
const $ = require('gulp-load-plugins')({
  pattern: ['gulp-*', 'browserify', 'vinyl-source-stream']
});

gulp.task('js', () => {
  return $.browserify({              // Browserify の設定
    entries: ['./src/js/index.js'],  // エントリポイントとなるファイル
    debug: true,                     // ソースマップを出力するために設定する
    transform: [                     // Browserify のトランスフォーム設定
      ['babelify', {                 // Babelify でトランスパイルする
        presets: ['es2015'],         // Babel-Preset-ES2015 を読み込む指定
        sourceMaps: true             // ソースマップを出力する
      }]
    ]
  })
    .bundle()                        // Browserify を実行する
    .on('error', function(error) {   // エラーハンドリング・アロー関数にしないこと
      console.log(`Browserify Error : ${error.message}`);
      this.emit('end');
    })
    .pipe($.vinylSourceStream('index.js'))  // Browserify が生成したファイルを Vinyl 形式に変換する
    .pipe(gulp.dest('./www/js'));           // ./www/js/ 配下に index.js を出力する
});

エントリポイントとなる ./src/js/index.js から、関連する全ての JS ファイルが import で辿れるようにしておく。

これらを Babelify + Babel-Preset-ES2015 によって ES2015 の形式から ES5 にトランスパイルし、最終的に Browserify で1ファイルに結合する。生成したファイルに Vinyl-Source-Stream を噛ませて、Gulp で扱える Vinyl 形式に変換してやったら ./www/js/ 配下に出力。

今回ソースマップを出力するようにしたので、生成した ./www/js/index.js 内にはソースマップの情報が追記されている。

大体コレが ES2015 なコードを Babel でトランスパイルする基本形になると思う。