javascriptのコンパイラであるbabelの紹介

Babel · The compiler for next generation JavaScript
　javascriptはES6という便利な記法があります。これから先も少しずつ記法が増え、javascriptプログラムをより楽に正確に書くための言語も増えていくでしょう。しかしながら、ブラウザにこれら全てを生のまま対応しろというのは酷な話です。javascriptのみでも未対応の関数、記法は少なからずあります。babelは近年の多様な言語を多くのブラウザで読めるようにコンパイルしてくれるプログラムです。
　具体的に何ができるかというと

a => b
let d = `d`;
const e = `e`;
`abc${d}
${e}
`
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    distance() {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    }
}
new Point(1, 2)

こんなのが

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

(function (a) {
    return b;
});
var d = "d";
var e = "e";
"abc" + d + "\n" + e + "\n";

var Point = function () {
    function Point(x, y) {
        _classCallCheck(this, Point);

        this.x = x;
        this.y = y;
    }

    _createClass(Point, [{
        key: "distance",
        value: function distance() {
            return Math.sqrt(this.x * this.x + this.y * this.y);
        }
    }]);

    return Point;
}();
new Point(1, 2);

　こんなのになります。後者の文量は前者の5倍以上です。classは元々のjavascriptになかっただけあってとても巨大になっています。この記述の変換によって、便利な記法で書いたjavascript用プログラムがIEでも難なく動きます。Try it outのでブラウザ上のままお試しが出来ます。
　babelはnpmで導入できます。installはプロジェクトのルートをcdにして次のコマンドを実行。

npm init
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev babel-cli
npm install --save-dev babel-core
npm install --save-dev babel-preset-minify

　同じくプロジェクトのルートに.babelrcを置いて、以下の記述を書き込んで簡単な初期設定が完了。

{
"presets": [
  ["env",{
    "targets": {
      "browsers": ["last 2 versions", "ie 11"]
    },
    "modules": false,
    "useBuiltIns": true
  }],
  ["minify",{
    "keepFnName": false,
    "keepClassName": false
  }]
]}

　minifyの設定があるように圧縮もできます。他にも設定可能な項目は多々あります。
使いかたは次の通り、次のコマンドでsrc以下がdist以下にコンパイルされます。

babel src -d dist

　一度準備さえすればそこからは楽の積み重ねができます。