やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

Babelでトランスパイルする(Node.jsを使わずブラウザだけで)

BabelのCDNを使って簡単に。

成果物

github.com

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Babel</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function(){
   const getMessage = () => "Hello Babel !!";
   document.body.innerHTML = getMessage();
    }, false);
    </script>
</head>
<body></body>
</html>

上記は「アロー関数」というやつ。C#の無名メソッドに似てる。functionを省略できるのは素敵。

残念

import構文は使えなかった。

開発環境

参考

機能の俯瞰

ES仕様(es2015〜es2018)まとめ - Qiita

構文

http://cloudcafe.tech/?p=120

補足

Babelはトランスパイラ。ES2015などブラウザに未実装の言語仕様で書かれたコードを、ブラウザで動作する古いコードに変換する。

Babelは一般的にNode.jsのnpmモジュールとしてインストールするが、今回はブラウザだけで使ってみた。CDNを利用すれば簡単。