Babelの概要を理解する

上司「今回のプロジェクトはBabel使うよ」

私 「へー、そうなんですねー。Babelっての使うと何がどうなるんですか?」

上司「今までjsでこういう風に書いていたのをこういう風に書けるようになるよ」

私 「へー・・・」

上司「(絶対分かってなさそうだけど、まぁいいや)」

私 「(やばい・・・諦められている)」

ということで、危機感を募らせ、概要だけでも理解しようとgoogleを開くのであった。

とりあえず公式サイトのトップだけでも読んでみる。

公式サイト

Babel · The compiler for writing next generation JavaScript

ワイルド系おしゃれ!

Babel transforms your JavaScript

なんか、jsのコードをトランスフォームしてくれるらしいです。

Bableを使用すると、まだES2015(またはそれ以降のバージョン)対応していないブラウザ、の文法を使えるようになるようです。

Polyfill

初めて見る単語。

macの辞書で調べてみましたが、macも知らないって。

ぐぐる。

古いブラウザーに欠けている部分、新しいブラウザーでも足りない機能の穴を埋めることを、ポリフィル (polyfill) という風に呼ばれています。

もともと、壁の穴を埋めるための有名な商品で Polyfilla (ポリフィラ) というのがあり、ブラウザの穴を埋めるという行為も名前からポリフィルという言葉を動詞として使ったということです。

引用元:http://keicode.com/script/what-is-polyfill.php

分かりやすい。

きっと、ブラウザの種類やバージョンに関わらず、今時なjsが書けるようになるのでしょう。

すばらしい。

上でES2015が出てきましたが、それ以外にもきっと何かがあるんでしょうね。(遠い目)

JSX and Flow

一瞬の迷いも無く、JSXをぐぐった。おそらくこちら。

JSX in Depth

意訳:JSXとはjsをXMLみたいに記述できるReActのエクステンションです。

なんだって。それは、むしろ苦行じゃないのか。

ReActも使った事無いのでよくわからなかった。

Pluggable

Babelはプラグインを利用して機能を増やす事ができます。

ふーん。

Babelのインストールと設定

インストールはnpmで。

$ npm install --save-dev babel-cli

次にこちらの記載がある。

Create a .babelrc file in your project (or use your package.json)

.babelrcを作成する(または、package.jsonを使う)

しばらく、理解に苦労しましたが、babelは本体だけでは何かしてくれるわけでなく、プラグイン(プリセット)と一緒で初めて機能するようです。

なので、そいつらをインストールする必要があります。

今回のプロジェクトでは、.babelrcは存在しないから、上司はきっとpackage.jsonを使ったんでしょうね。


  "devDependencies": {
    "babel-core": "^6.7.6",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.7.5",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.6.1",
    ・・・・
}

この辺りだな。

とりあえず、概要は理解できた気がするので、本日はこの辺りまで。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク