ES6構文を使ってみましょう。ES6構文は「古い」ES5構文を大幅に改善したものです。全てのブラウザとJS環境はES5を理解しますが、ES6は理解するとは限りません。そのため、Babelと呼ばれる、ES6ファイルをES5ファイルに変換するツールを使います。Babelを実行するには、タスクランナーのGulpを使います。package.jsonファイルのscripts以下に書くタスクに似ていますが、タスクをJSファイルに書く方がJSONファイルに書くよりもシンプルで汚くなりにくいです。そのため、Gulpと、Gulp用のBabelプラグインもインストールしておきましょう:
yarn add --dev gulpと実行しますyarn add --dev gulp-babelと実行しますyarn add --dev babel-preset-latestと実行しますyarn add --dev delと実行します (これは後述の通り、cleanタスクのためです)package.jsonファイルに、Babelの設定のためのbabelフィールドを追加します。最新のBabelプリセットを使うため、以下のようにします:
"babel": {
"presets": [
"latest"
]
},注意: .babelrcファイルがプロジェクトのルートにあると、package.jsonのbabelよりもそちらが優先されます。ルートフォルダはそのうちどんどん膨れ上がっていくため、package.jsonが巨大にならないうちは、Babelの設定はpackage.json内に記述するようにします。
index.jsファイルを新たなsrcフォルダに移動します。これはES6のコードを記述するためのフォルダです。libフォルダはコンパイル後のES5コードが置かれます。GulpとBabelはこのコード生成の面倒を見ます。index.jsにある前章のcolor関連のコードを削除し、以下の簡単な内容に書き換えます:
const str = 'ES6';
console.log(`Hello ${str}`);ここではテンプレート文字列リテラルを使っています。これはES6の新しい構文で、${}を使った文字列連結なしで変数を直接文字列内に埋め込むためのものです。テンプレート文字列リテラルはバッククォートを使っていることに注意してください。
- 以下の内容で
gulpfile.jsを作ります:
const gulp = require('gulp');
const babel = require('gulp-babel');
const del = require('del');
const exec = require('child_process').exec;
const paths = {
allSrcJs: 'src/**/*.js',
libDir: 'lib',
};
gulp.task('clean', () => {
return del(paths.libDir);
});
gulp.task('build', ['clean'], () => {
return gulp.src(paths.allSrcJs)
.pipe(babel())
.pipe(gulp.dest(paths.libDir));
});
gulp.task('main', ['build'], (callback) => {
exec(`node ${paths.libDir}`, (error, stdout) => {
console.log(stdout);
return callback(error);
});
});
gulp.task('watch', () => {
gulp.watch(paths.allSrcJs, ['main']);
});
gulp.task('default', ['watch', 'main']);全体を理解するために少し時間をとりましょう。
GulpのAPI自体は非常に率直なものです。gulp.taskを定義し、その中ではgulp.srcでファイルを参照し、そのファイルに対し一連の操作を.pipe()を使って適用し(この例のbabel()のように)、新しいファイルをgulp.destに出力します。Gulpのタスクは、gulp.taskの第2引数として(['build']のような)配列の形で渡された必要なタスクを先に実行することができます。より完全な紹介は、ドキュメントを参照してください。
まず最初にpathsオブジェクトを定義します。これは異なるファイルパスを格納し、DRYに保つためです。
続いて5つのタスク: build、clean、main、watch、そしてdefaultを定義します。
buildはsrc以下のソースファイルを変換しlibに保存するため、Babelが呼ばれるところです。cleanはbuildを行う前に、libフォルダに自動生成されるファイル全てを削除するタスクです。このタスクは、src内のファイルをリネームや削除したり、ビルドに失敗したことに気づかない場合でもlibフォルダをsrcフォルダに確実に同期させるため、生成されたファイルを削除するのに便利です。Gulpストリームと連携してファイルを削除するために、ここではdelパッケージを使っています(これはGulpでのファイルの削除方法として推奨されている方法です)。mainは前章でnode .と入力し実行させているのとほぼ同じもので、lib/index.jsを実行することだけが異なっています。index.jsはNodeが探しにいく標準のファイル名なので、単にnode libとだけ書いています(DRYを守るためにlibDir変数を使っています)。タスク内のrequire('child_process').execとexecの部分はシェルコマンドを実行するNodeの標準関数です。stdoutはconsole.log()に渡し、gulp.taskのコールバック関数を使って潜在的なerrorを返します。この部分がはっきりと理解できなくても気にする必要はありません。このタスクは基本的にnode libを実行するためのものであるとだけ覚えてください。watchは特定のファイルに更新があった場合にmainタスクを実行します。defaultは、コマンドラインで単にgulpと実行した場合に呼び出される特殊なタスクです。
注意: どうしてGulpファイル内でES6コードが使えるのか、気になっているかもしれません。なぜならこのコードはBabelでES5コードにトランスパイルされないからです。その理由は、ここではES6を標準でサポートしているバージョンのNodeを使っているためです(node -vを実行し、バージョン6.5.0以上のNodeを使っていることを確認してください)。
さあ、動かしてみましょう!
package.json内のstartスクリプトを"start": "gulp"に変更します。yarn startと実行します。"Hello ES6"と表示され、変更の監視が始まるはずです。src/index.jsに間違ったコードを書いてみて、saveしたときにGulpが自動的にエラーを表示するか試してみましょう。/lib/を.gitignoreに追加します。