業務で ES5 の書き方を強いられることになってしまったため、Babel を使って ES6 を ES5 に変換できるようにしました。
そのやり方を書き残しておきます。
＊背景
2020年4月現在、JavaScript のESバージョンは ES2019 まで出ています。ところが、業務で使っているツールが ES5 までしか対応していないので、ES6 以降の機能が使えないという状況になっています。- 2009年12月 ：ES5 ←ここ
- 2015年6月 ：ES6
- 2016年6月 ：ES2016
- 2017年6月 ：ES2017
- 2018年6月 ：ES2018
- 2019年6月 ：ES2019
- ES6の対応状況
- Microsoft / Internet Explorer の今後について
- 深津さん(note) / さよならInternet Explorer
- LIG / 今後LIGが制作するWebサイトは、Internet Explorerの対応をやめます。
＊私の環境
- macOS
- Node 12.14.1
- babel/cli 7.8.4
- babel/core 7.9.0
- babel/preset-env 7.9.0
- gulp 4.0.2
- gulp-babel 8.0.0
＊Babelのインストール
任意の作業フォルダを作成し、下記コマンドを実行して初期化します。（package.json が作成されます）$ npm init
変換前後のファイルを格納するためのディレクトリを作成します。
- src ：ES6で書いたファイルを格納するためのディレクトリ
- dist ：変換後のファイルを格納するためのディレクトリ
$ mkdir src dist
自分の作業フォルダでコマンドを実行し、babel をインストールします。
- babel/core ：Babel本体のモジュール
- babel/cli ：コマンドラインで操作するためのモジュール
- babel/preset-env ：変換方法を設定するためのモジュール
$ npm install --save-dev @babel/core @babel/cli @babel/preset-env
ソースを修正したあとにいちいちコマンドを叩いてビルドするのは面倒なので、変更を監視してくれるように gulp もインストールしました。
$ npm install --save-dev gulp gulp-babel
＊Babelの設定ファイルを作成
作業フォルダ直下に.babelrcという名前で設定用ファイルを作成し、下記内容を書き込みます。{
"presets": ["@babel/preset-env"]
}
作業フォルダ直下に gulpfile.js を作成します。
var gulp = require('gulp');
var babel = require('gulp-babel');
// 変換するためのタスク
gulp.task('default', function () {
return gulp.src('src/*.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
// 監視するためのタスク
gulp.task('watch', function () {
gulp.watch('src/*.js', gulp.series('default'));
});
＊package.jsonを編集
変換実行を npm コマンドで実行したかったので、package.json の script に変換用と監視用のコマンドを追加しました。- gulp ：変換用
- watch：監視用
"scripts": {
"gulp": "gulp",
"watch": "gulp watch"
},
＊変換
src ディレクトリに ES6 で書いたファイルを用意します。const name = 'MoguMogu';
let comment = `My name is ${name}`;
const fn = (a, b) => {
return a + b;
}
作業フォルダ直下で、下記コマンドを実行して変換してみます。
$ npm run gulp
dist ディレクトリに変換後のファイルが作成されました。
"use strict";
var name = 'MoguMogu';
var comment = "My name is ".concat(name);
var fn = function fn(a, b) {
return a + b;
};
src ディレクトリを監視するようにします。
下記コマンドを実行して監視状態にしておくと、変更を検知して自動でファイルを変換してくれます。
$ npm run watch
＊参考
＊所感
コードの変更を監視するツールに nodemon というのもあったのですが、今回は使い慣れている gulp を使いました。またの機会に nodemon も試してみたいと思います。Sign up here with your email
ConversionConversion EmoticonEmoticon