トランスパイラbabelの基本の「き」

2021年12月25日

babelは現在のフロントエンド開発にはなくてはならない存在ですが、一体何をしているのか？を試して知っておきましょう。

トランスパイラbabelの環境構築

babelをインストールします。

$ yarn init
$ yarn add babel-cli babel-preset-env
$ ./node_modules/.bin/babel -V      
6.26.0 (babel-core 6.26.3)

この時点でpackage.jsonはこうなっています。

{
  "name": "sandbox",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0"
  }
}

トランスパイラbabelでトランスパイルしてみる

サンプルソース

// オブジェクトの分割代入
const myProfile = {
  name: "鈴木",
  age: 35,
}

const {name, age} = myProfile;

console.log(name);
console.log(age);

7行目では分割代入という新しい記法を使っています。
上記のサンプルソースを、ルート直下など適当な場所に配置します。

トランスパイル

では、トランスパイルさせてみましょう。

$ ./node_modules/.bin/babel ./sample.js
"use strict";

// オブジェクトの分割代入
var myProfile = {
  name: "鈴木",
  age: 35
};

var name = myProfile.name,
    age = myProfile.age;

console.log(name);
console.log(age);

1行目で./node_modules/.bin/babelに対して、トランスパイルしたいjsファイルを渡しています。
トランスパイル結果がそれ以下に表示されています。

分割代入の箇所は、分割代入記法ではなくなり、従来の記法になっています。

また、const宣言だった箇所も、従来のvar宣言になっています。

これで、babelがトランスパイルするということは、従来の記法に変換することだということが理解できたと思います。