[npm][node]babelでコンパイルするまでの道のり

reactをbabelを使ってコンパイルするにあたってそもそもbabelを使ったことがないので、その方法をついて調査しました。

まずは、Babel CLIをインストール。

npm install -g babel-cli

globalインストールはバッドノウハウなのですが、いったんはこれで。

次に、reactを使いたいので、

npm install --save-dev babel-preset-react

さらに、es2015に変換してほしいので、

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

にしてpackage.jsonを下のように設定。

{
  "description": "react test",
  "repository": {},
  "license": "MIT",
  "dependencies": {
    "babel-cli": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  },
  "babel": {
    "presets": [
      "react",
      "es2015"
    ]
  }
}

でターミナルで

babel script.js

を打ち込んだらでました！

上の場合は、ターミナルに表示されてしまうので、ファイルに出力させたい場合は、

babel foo.js -o hoge.js

でOK

やっとできた。