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タスク を走らせると……

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

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

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

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

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

---

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

参考

gulp-babel

• gulp-babel – npm
• Babel の使い方｜npaka｜note
• gulp 4 + Babel 7 導入 – Qiita

ポリフィル

• webpack4, @babel, IE11でforEachがエラー | ただ屋ぁのブログ
• ハンズオン：今時のフロントエンド開発の最初の一歩 – Qiita
• Babelによるトランスパイルの挙動について理解する – Qiita