Babelでトランスパイル! - JavaScript入門

Babelとは

BabelはJavaScriptのトランスパイラです。
トランスパイラは、あるプログラミング言語で書かれているプログラムを違う言語もしくは違うバージョンの言語のプログラムに変換します。

Babelは、JavaScriptのプログラムをJavaScriptのプログラムに変換します。
より具体的には、新しいJavaScriptのプログラムを、古いJavaScriptのプログラムに変換します。

なぜ、新→古の変換の必要があるのか、というと、ブラウザの対応状況がそれぞれ異なるからです。
そのため、古いバージョンのJavaScriptに変換することで、どんなブラウザでも動作するようにする必要があります。

Babelを使ってみる

Babelのインストール

まずはじめに、Babelをインストールしますが、その前に、準備です。
npmがインストールされており、npm initを実行しておきます。

npm installでインストールします。
@babel/coreがBabelの本体で、@babel/cliはコマンド用のパッケージです。
-D オプションをつけることで、開発環境のみにインストールします。

$ npm i -D @babel/core @babel/cli

インストール後のpackage.jsonの一部です。

  "devDependencies": {
    "@babel/cli": "^7.14.5",
    "@babel/core": "^7.14.6"
  }

presetを設定

続いて、どのように変換するかという設定をする必要があります。
これがpresetというものの設定になります。

ここでは、ES6の新しいJavaScriptで書かれたプログラムをブラウザで動く古いバージョンのJavaScriptに変換します。
そのためのpresetとして、@babel/preset-envを使います。
このほかにも、React用の@babel/preset-react等もあります。

インストールはnpm installで行います。

$ npm i -D @babel/preset-env

インストールが終わったので設定ファイルを記述します。
Babelの設定ファイルは、.babelrcです。

{
  "presets": [
    "@babel/preset-env"
  ]
}

トランスパイルする

ここまでで準備は完了しました。
あとはbabelコマンド実行するだけです。

$ ./node_modules/.bin/babel app.js

例として、次のように変換されます。

変換前

import Hello from "./hello.js";

console.log(Hello())

変換後

"use strict";

var _hello = _interopRequireDefault(require("./hello.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

console.log((0, _hello["default"])());

終わり