JavaScript
babel

Babel環境を構築

備忘録のため投稿します。
(Babel単独で使用するときのもの)

※gulpでBabelを使用するときの手順はこちらにまとめてます。
gulp入門と備忘録から作業前の環境構築のパターンまで

Babelとは

次世代のJavaScriptの標準機能を、ブラウザのサポートを待たずに使えるようにするNode.js製のツールです。次世代の標準機能を使って書かれたコードを、それらの機能をサポートしていないブラウザでも動くコードに変換(トランスパイル)します。
「次世代のJavaScriptの標準機能」というのはECMAScript(以降、ESと呼びます)のバージョン6や7で追加された(る)機能、そしてさらにその先の標準機能です。

引用元:Babelの手ほどき

手順

  • ローカルにインストール
  • package.json生成
  • .babelrcを生成
  • es6でjsファイルを書く
  • コンパイル作業
  • ファイルの監視(watch適用)

ローカルにインストール

command
$ npm install --save-dev babel-cli
$ export PATH=$PATH:./node_modules/.bin

package.json生成

公式サイトを参考
http://babeljs.io/docs/usage/cli/

.babelrcを生成

「babel-preset-es2015」をインストール

command
$ npm install --save-dev babel-preset-es2015
$ echo '{ "presets": ["es2015"] }' > .babelrc

es6でjsファイルを書く

input.js
class App {
  constructor() {
    console.log('class syntax');
  }
}

const func = () => {
  console.log('arrow function');
};

コンパイル作業

command
$ babel input.js --out-file output.js

es6以前のコードにコンパイルされる

output.js
'use strict';

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

var App = function App() {
  _classCallCheck(this, App);

  console.log('class syntax');
};

var func = function func() {
  console.log('arrow function');
};

ファイルの監視(watch適用)

command
$ babel input.js --watch --out-file output.js

参考サイト