webpack+babel環境でフロントエンドもES6開発 #JavaScript

概要

昨今、JavaScriptコミュニティ界隈で騒がれているES6（ES2015）。クラスの導入など便利な機能が追加されてNode.jsでは既に導入されているというのに、フロントエンド環境（ブラウザ）上で利用できるようになるにはまだまだ先になりそうです。

そこで、フロントエンド環境でもES6を先取って開発する為の環境構築方法を記載します。

webpack + babel環境インストール

ES6からブラウザが利用できるJavaScript(ES5)にコンパイル＝変換を行う為の環境を構築します。
今回はwebpackという依存性を解決するツールとBabelというJavaScriptコンパイラを利用します。

本記事はライブラリ管理ツールであるnpmを用いる為、Node.js環境を既に構築してある前提です。Node.js環境のインストール方法はこちら。
参考：nodebrew を用いた Node.js環境構築

1. webpack + babelをインストールする

npm初期化、package.jsonの生成を行います。

ターミナル

$ npm init

このpackage.jsonにはインストールされたnpmライブラリのリストなどの情報が追加され、自分以外の作業者でも同一環境を構築することを容易にします。

次にwebpackとbabelをインストールします。

ターミナル

$ npm install --save-dev webpack babel-core babel-loader babel-preset-react babel-preset-es2015

今回インストールしたnpmライブラリは下記の通りです。

webpack: リソース同士の依存関係を解決して、アセットを生成するビルドツール。Javascriptに限らず、CSSや画像ファイルなども扱うことが可能です。
babel-loader: Babel is a compiler for writing next generation JavaScript.This package allows transpiling JavaScript files using Babel and webpack.
babel-preset-react: Strip flow types and transform JSX into createElement calls.
babel-preset-es2015: All you need to compile ES2015 to ES5

※ babel6系からパッケージの分離が行われた為、bebel5系と異なりbabel-preset-es2015やbabel-preset-reactなど機能＝プリセット単位で別途インストールする必要があります。

2. webpackの設定

webpack.config.js

module.exports = {
  context: __dirname + '/source',
  entry: {
    'application': './es2015/application',
  },
  output: {
    path: __dirname + '/distribution/javascript',
    filename: '[name].js'
  },
  module: {
    loaders: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel", 
        query:{
          presets: ['react', 'es2015']
        }
      }
    ]
  }
};

設定の概要は下記となります。

context: entryオプションを解決するためのベースとなるディレクトリ
entry: エントリーポイントの設定
output: ファイル出力の設定
module: モジュールのオプション

詳細はこちらを参照してください。
参考：webpack CONFIGURATION(公式)

ここまでの準備で利用する環境が構築できました。

チュートリアル

実験としてES6（ES2015）から追加された機能であるクラスを用いたチュートリアルを行います。

1.ディレクトリ生成

先程の設定ファイルに合わせてディレクトリを生成します。

ターミナル

$ mkdir -p source/es2015 distribution/javascript

2.ファイルを用意

コンポーネントとして用いる親クラスを用意します。
ここではクラスの説明は割愛します。インスタンスを生成する際、引数に文字列でnameを渡すことでメンバ変数nameに代入するクラスを用意しました。

source/es2015/person.js

class Person {
    constructor(name) {
        this.name = name;
    }
}
export default Person;

次に実行スクリプトを用意します。

source/es2015/application.js

import Person from './person';

class Friend extends Person{
    constructor(name) {
      super(name);
    }
    callName() {
      alert(this.name);
    }
}

var friend = new Friend('Ryo');

friend.callName();

import Person from './person'で先ほど用意した外部ファイルであるPersonクラス（source/es2015/person.js）をインポートしています。
またclass Friend extends Personで先ほどのクラスを継承、拡張しています。今回は実行するとメンバ変数nameをアラートで表示するメソッドを追記しています。

最後にJavascriptを実行する為のHTMLファイルを用意します。

distribution/index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <script src="javascript/application.js"></script>
</body>
</html>

3.コンパイルを行う

上記で用意したES6のままではブラウザで解釈（処理）できない為、ブラウザで処理可能なES5形式にコンパイル＝変換を行います。

下記コマンドでwebpackの処理を実行します。

ターミナル

`npm bin`/webpack 

Hash: 2fa1903137649928f74e
Version: webpack 1.12.9
Time: 2319ms
         Asset     Size  Chunks             Chunk Names
application.js  3.95 kB       0  [emitted]  application
    + 2 hidden modules

※｀npm bin｀はnpmでインストール実行ファイルの場所を出力するコマンドです。direnvなどを用いて予めパスを通せば省略することも可能です。
参考：ディレクトリごとに環境変数を定義

4.確認

実際にHTMLファイル（distribution/index.html）をブラウザで読み込んで下記のようなアラートが表示されれば成功です。