GulpでBabelを使ってみる

ES2015をES5に変換できるBabelをGulpで使ってみます。

設定方法

Gulpを使用するので、あらかじめ使えるように準備しておきます。
インストールについては以前に記事で紹介しているので省略します。
Gulp.jsの導入~Sassのコンパイルまで試してみた

Gulpの準備完了後、Babelをインストールします。

npm install -g gulp-babel

作業ディレクトリへ移動します。

cd 作業ディレクトリ

プロジェクトファイルを作成します。

npm init

作業ディレクトリにもGulpをインストールします。

npm install gulp --save-dev

ES2015用のpresetをインストールします。

npm install babel-preset-es2015 --save-dev

.babelrcを作成して下記を記述します。

.babelrc

{
  "presets": ["es2015"]
}

GulpプラグインのBabelをインストールします。

npm install gulp-babel --save-dev

gulpfile.jsに設定を記述します。

gulpfile.js

var gulp = require('gulp');
var babel = require('gulp-babel');

// babel
gulp.task('babel', function () {
	gulp.src('./es/script.js')
	.pipe(babel())
	.pipe(gulp.dest('./js'));
});

 

使い方

esディレクトリを作成して、下記内容でscript.jsを作成します。

es/script.js

const test = 'テスト';
console.log(test);

Babelを実行します。

gulp babel

js/script.jsが以下の内容で出力されました。

js/script.js

'use strict';

var test = 'テスト';
console.log(test);

 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

1件のコメント

  1. […] GulpでBabelを使ってみる […]

gulp + Babel 導入備忘録 | IT技術情報局 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年5月
 1
2345678
9101112131415
16171819202122
23242526272829
3031