2019年6月17日

BabelでモダンなJavaScriptをトランスパイルする

gulpとbabelを使って、モダンな記述で書かれたJavaScriptを古い記述に変換(トランスパイル)する。

モダンなJavaScriptとは

たとえば関数をこんな感じで書くやつ。

const f = (hoge, fuga) => {
  return hoge + fuga;
};

const a = 1;
const b = 2;

console.log(f(a, b));

Babelとは

Babel(バベル)は、モダンなJavaScriptで書かれたコードを古い記述に変換するもの。

gulpで変換する

プロジェクトフォルダ(たとえばgulp-babel-test)を任意の場所に作って移動。

cd フォルダをドラッグ&ドロップ

フォルダを以下のように構成し、

gulp-babel-test
└── dev
    └── js
        └── sample.js

簡易初期化。

npm init -y

プロジェクトフォルダ直下にgulpfile.jsを作成。

// モジュールを読み込む
const gulp = require('gulp');
const babel = require('gulp-babel');

// パス
const paths = {
  "dev": {
    "js": "./dev/js"
  },
  "dist": {
    "js": "./dist/js"
  }
}

// モダンなJavaScriptをレガシーなそれに変換する
function js(){
  // コンテンツを取得
  return gulp.src(paths.dev.js + '/*.js')
    // ビルド処理
    .pipe(babel({
        presets: ['@babel/env']
    }))
    // 本番に配置
    .pipe(gulp.dest(paths.dist.js));
}

// 「test」という名前でタスクを実行する
exports.test = js;

必要なモジュールをインストール。

npm i -D gulp gulp-babel @babel/core @babel/preset-env

タスクを実行。

npx gulp test

distにJavaScriptファイルがビルドされればOK。