Help us understand the problem. What is going on with this article?

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

HayneRyo
底辺エンジニアの備忘録としてQiitaを利用させて頂いております。
codecamp
現役エンジニアによるプログラミングのマンツーマンレッスンを提供するCodeCampを運営するスタートアップ
http://codecamp.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした