--- title: webpack+babel環境でフロントエンドもES6開発 tags: JavaScript es6 webpack フロントエンド 新人プログラマ応援 author: HayneRyo slide: false --- ## 概要 昨今、JavaScriptコミュニティ界隈で騒がれているES6(ES2015)。クラスの導入など便利な機能が追加されてNode.jsでは既に導入されているというのに、フロントエンド環境(ブラウザ)上で利用できるようになるにはまだまだ先になりそうです。 そこで、フロントエンド環境でもES6を先取って開発する為の環境構築方法を記載します。 ## webpack + babel環境インストール ES6からブラウザが利用できるJavaScript(ES5)にコンパイル=変換を行う為の環境を構築します。 今回は**webpack**という**依存性を解決するツール**と**Babel**という**JavaScriptコンパイラ**を利用します。 本記事はライブラリ管理ツールであるnpmを用いる為、Node.js環境を既に構築してある前提です。Node.js環境のインストール方法は[こちら](http://qiita.com/HayneRyo/items/326de7231d907447834d)。 参考:[nodebrew を用いた Node.js環境構築](http://qiita.com/HayneRyo/items/326de7231d907447834d) ### 1. webpack + babelをインストールする npm初期化、package.jsonの生成を行います。 ```bash:ターミナル $ npm init ``` このpackage.jsonには**インストールされたnpmライブラリのリストなどの情報**が追加され、自分以外の作業者でも同一環境を構築することを容易にします。 次に**webpack**と**babel**をインストールします。 ```bash:ターミナル $ 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の設定 ```javascript: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
モジュールのオプション
詳細は[こちら](https://webpack.github.io/docs/configuration.html)を参照してください。 参考:[webpack CONFIGURATION(公式)](https://webpack.github.io/docs/configuration.html) ここまでの準備で利用する環境が構築できました。 ## チュートリアル 実験としてES6(ES2015)から追加された機能であるクラスを用いたチュートリアルを行います。 ### 1.ディレクトリ生成 先程の設定ファイルに合わせてディレクトリを生成します。 ```lang:ターミナル $ mkdir -p source/es2015 distribution/javascript ``` ### 2.ファイルを用意 コンポーネントとして用いる親クラスを用意します。 ここではクラスの説明は割愛します。インスタンスを生成する際、引数に文字列で`name`を渡すことでメンバ変数`name`に代入するクラスを用意しました。 ```file:source/es2015/person.js class Person { constructor(name) { this.name = name; } } export default Person; ``` 次に実行スクリプトを用意します。 ```file: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ファイルを用意します。 ```file:distribution/index.html ``` ### 3.コンパイルを行う 上記で用意したES6のままではブラウザで解釈(処理)できない為、ブラウザで処理可能なES5形式にコンパイル = 変換を行います。 下記コマンドでwebpackの処理を実行します。 ```lang:ターミナル `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](http://qiita.com/HayneRyo/items/5a9fa23a5215f7f75bd8)などを用いて予めパスを通せば省略することも可能です。 参考:[ディレクトリごとに環境変数を定義](http://qiita.com/HayneRyo/items/5a9fa23a5215f7f75bd8) ### 4.確認 実際にHTMLファイル(`distribution/index.html `)をブラウザで読み込んで下記のようなアラートが表示されれば成功です。 ![スクリーンショット 2016-01-04 18.00.18.png](https://qiita-image-store.s3.amazonaws.com/0/72553/97e70582-f2f0-00e3-d530-1409d379abb2.png)