JavaScript
es6
フロントエンド
webpack
新人プログラマ応援

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

More than 1 year has passed since last update.


概要

昨今、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ライブラリのリストなどの情報が追加され、自分以外の作業者でも同一環境を構築することを容易にします。

次にwebpackbabelをインストールします。


ターミナル

$ 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

)をブラウザで読み込んで下記のようなアラートが表示されれば成功です。

スクリーンショット 2016-01-04 18.00.18.png