gulp-babel を試す

Babel が入用になったので、サクッと使用するために gulp-babel を試すことにしました。

package.json

{
    "name": "tower_babel_test",
    "version": "1.0.0",
    "description": "gulp-babel のテストプロジェクトです。",
    "main": "gulpfile.js",
    "scripts": {
        "start": "gulp",
        "gulp": "gulp"
    },
    "devDependencies": {
        "@babel/cli": "^7.11.6",
        "@babel/core": "^7.11.6",
        "@babel/preset-env": "^7.11.5",
        "browser-sync": "^2.26.12",
        "gulp": "^4.0.2",
        "gulp-babel": "^8.0.0",
        "gulp-notify": "^3.2.0",
        "gulp-plumber": "^1.2.1"
    }
}

Babel 本体・CLI・プリセット、 Gulp周り、それから Browsersync をリストアップします。

gulpfile.js

const gulp        = require('gulp');
const plumber     = require('gulp-plumber');
const notify      = require('gulp-notify');
const babel       = require('gulp-babel');
const browserSync = require('browser-sync').create();

const dir = {
    src: {
        js   : './src'
    },
    dist: {
        html : './dist',
        js   : './dist/js'
    }
};

const babelBuild = () => {
    return gulp.src('src/*.js')
        .pipe(plumber({
            errorHandler: notify.onError({
                message: 'Error: <%= error.message %>',
                title: 'BabelBuild'
            })
        }))
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .pipe(gulp.dest(dir.dist.js));
};

const browsersync = () => {
    browserSync.init({
        server: {
            baseDir: dir.dist.html
        },
        open: 'external',
        https: true
    });

    const bReload = browserSync.reload;
    gulp.watch(
        dir.dist.html + '/**/*.html'
    )
        .on('add',    bReload)
        .on('change', bReload)
        .on('unlink', bReload);
    const sJs = gulp.series(babelBuild, browserSync.reload);
    gulp.watch(
        `${dir.src.js}/**/*.js`
    )
        .on('add',    sJs)
        .on('change', sJs)
        .on('unlink', sJs);
};

exports.server  = browsersync;
exports.build   = babelBuild;
exports.default = gulp.series(babelBuild, browsersync);

gulp-babel を使用するタスクと Browsersync のタスクを用意。

サンプル

次にサンプルを用意します。

src/app.js

$(() => {
    const list = [
        'intro',
        'Rain Dog',
        'En',
        'sister',
        '最後の朝',
        'Island',
        'Tower',
        'SAKURA',
        'home'
    ];
    if (list.length > 0) {
        const $ol = $('<ol/>');
        for (const [key, val] of list.entries()) {
            const $li = $('<li/>');
            const num = key + 1;
            let numStr = String(num);
            if (num < 10) {
                numStr = `0${String(num)}`
            }
            $li.text(`${numStr}: ${val}`);
            $ol.append($li);
        }
        const bookshelf = 'bookshelf';
        $(`#${bookshelf}`).append($ol);
        $ol.css({
            listStyle: 'none outside',
            paddingInlineStart: 0
        });
    }
});

テンプレートリテラルや for...of を含んだ JavaScript (jQuery使用)を用意。これで Gulpタスク を走らせると……

Babel でトランスパイルされた JavaScript コード
Babel でトランスパイルされた JavaScript コード

無事トランスパイルされました。

ブラウザでの表示確認 (Vivaldi)
ブラウザでの表示確認 (Vivaldi)

Vivaldi で問題なく表示されていることを確認。

ブラウザでの表示確認 (IE)
ブラウザでの表示確認 (IE)

IEEE!!! IE?! IEナンデ?!

と思わず言いたくなってしまいますが、 gulp-babel で構文のトランスパイル(変換)はしているもののポリフィル(古いブラウザ用の機能の提供)はしていないので、ダメなわけです。

具体的に言うと、 上記のサンプルコードでは for (const [key, val] of list.entries()) で使用している Object.entries 。これで引っかかっています。


そのため、次の手を考えることにします。

参考

gulp-babel

ポリフィル

この記事を書いた人

アバター

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。