れみゅーぶろぐ

某(元)高専生が多彩なジャンルにわたって書くブログ。非常に真面目なブログであると自負しております(要出典)。Twitter:@_remew_

Babelをインストールしたけど動かなかったおはなし

最近Javascriptにハマっていて、調べるうちにECMAScript6という存在を知りました。

 

クラスベース言語っぽくclass使える、アローファンクション、定数宣言、その他いろいろサイコーwとか思ったんですけど、どうやらes6(ECMAScript6のこと)に完全対応したブラウザはまだないらしいです。

 

TypeScriptとかCoffeeScriptとかでも使えたりするんですけど、個人的にAltJS系あんまり好きじゃないのと、将来的に基本となる(であろう)構文覚えるのは良い勉強になると思ったので、なんとかしてes6でJavascriptソース書きたい!

 

そこで、Babelというものを見つけました。

これは、es6のソースコードをes5(今のJavascript)に変換してくれるすごいやつらしいです。

 

これは使うしかないということで、

Using Babel · Babel

↑を参考にインストールして、いざ実行!

 

npm install -g babel-cli #インストール

babel src/test.js #標準出力に変換結果を表示

 

????

 

入力ファイルと同じファイルが出力されたぞ?w

なんで???w

 

当時、Windows関連で嫌な目にあったりしていたので「これはWindows特有のバグなのかな・・・」とか思いながらUbuntuインストールしたらWindowsが死にました。

 

Windowsが死んだ話はともかく、Ubuntuで試してみたんですけどやっぱりダメでした。

 

Macで試してもダメでした。

つらい。

 

なんでや。

 

よくよく導入方法が記されたページを見てみたら、

f:id:Foolish_OkNCT:20151118174647p:plain

なんだこれ。

英語読めないけどフィーリングでリーディングしてシンキングしたら、Babel6が登場したみたいな内容なんですね。

Babel 6 was just released!」のリンク先見たら、どうやら

npm install --save-dev babel-preset-es2015

 からの .babelrc(babelを実行するディレクトリに置く・・・?)に

{

    "presets": ["es2015"]

 を書かないといけないらしいです。

書いてまたbabel実行したらちゃんとトランスコンパイルできました!!!

 

ちゃんとトランスコンパイルできました!!!

 

神〜〜〜w