アルム＝バンド 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 。これで引っかかっています。
そのため、次の手を考えることにします。