[備忘録] Webpack で CreateJS（EaselJS）などを読み込むための設定（+ ES2015設定 & WebStorm設定） #JavaScript

Webpack 自体が初めてな人は、ここの React チュートリアルから始めてみるとスムーズに Webpack を使い始められるかも。
Webpack の基本的な使い方やローダーの概念については、ここが役立ちました。

準備

作業ディレクトリの作成＆移動。
- mkdir プロジェクト名
- cd プロジェクト名
CreateJS は Bower　経由でインストールすることとします。
- npm install -g bower
- bower init
- bower install --save EaselJS
また、webpack のほかに、exports-loader と imports-loader が必要となります。
- npm init -y
- npm install --save-dev webpack imports-loader exports-loader

webpack.config.js

Webpack のコンフィグはこんなかんじ。
以下を参考にしました。

var path = require('path');
var webpack = require('webpack');
var bowerResolver = new webpack.ResolverPlugin(new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main']));

module.exports = {
    entry: path.join(__dirname, 'src', 'main.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                // Webpack に CreateJS のライブラリでは `this` に `window` を参照させ、`window.createjs` を export するように設定
                test: /bower_components(\/|\\)(PreloadJS|SoundJS|EaselJS|TweenJS)(\/|\\).*\.js$/,
                loader: 'imports?this=>window!exports?window.createjs'
            },
        ]
    },
    plugins: [
        // Webpack に bower モジュールの main ファイルを発見させる
        bowerResolver
    ],
    resolve: {
        // bower_components をモジュールのルートディレクトリに追加
        modulesDirectories: ['node_modules', 'bower_components']
    }
};

src/main.js

EaselJS を利用する側ではこんな感じでコードを書けます。
- ※ 追記：ついうっかり ES2015 スタイルでコードを書いていたので、ES5 スタイルに修正しました。

var createjs = require('EaselJS');

(function() {
    // CreateJS (EaselJS) の動作チェック
    console.log( createjs );

    var stage = new createjs.Stage(canvas);

    var circle = new createjs.Shape();
    circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
    circle.x = 100;
    circle.y = 100;
    stage.addChild(circle);
    stage.update();

} ());

これで npm run build すれば、すべてのJSコードが一つにパッキングされた bundle.js が生成されます！

babel を使って ES2015 スタイルで書きたい

まずはパッケージをインストール。
- npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-stage-2
- babel-preset-stage-2 もインストールしておくと、さらに最近の追加仕様が使えるらしい（展開（スプレッド）演算子とか）。http://stefan.magnuson.co/articles/frontend/using-es7-spread-operator-with-webpack/
babel を使うので .babelrc を作成します。

{
    'presets': ['es2015', 'stage-2']
}

webpack.config.js は以下のような形になる.

var path = require('path');
var webpack = require('webpack');
var bowerResolver = new webpack.ResolverPlugin(new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main']));

module.exports = {
    entry: path.join(__dirname, 'src', 'main.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                // Babel で JS コードを ES6 -> ES5 変換
                test: /\.js$/,
                exclude: /node_modules|bower_components/,
                loader: 'babel-loader'
            },
            {
                // Webpack に CreateJS のライブラリでは `this` に `window` を参照させ、`window.createjs` を export するように設定
                test: /bower_components(\/|\\)(PreloadJS|SoundJS|EaselJS|TweenJS)(\/|\\).*\.js$/,
                loader: 'imports?this=>window!exports?window.createjs'
            },
        ]
    },
    plugins: [
        // Webpack に bower モジュールの main ファイルを発見させる
        bowerResolver
    ],
    resolve: {
        // bower_components をモジュールのルートディレクトリに追加
        modulesDirectories: ['node_modules', 'bower_components']
    }
};

ソースコード側は以下のようになる.
- 参考： http://blog.unshift.xyz/easeljs-custom-display-objects-in-es2015/
src/main.js

import * as createjs from 'EaselJS';

// 特定のオブジェクトだけ読み込むなら以下のように記述
// import { Stage, Ticker } from 'EaselJS';

{
    // CreateJS (EaselJS) の動作チェック
    console.log( createjs );

    const stage = new createjs.Stage(canvas);
    // const stage = new Stage(canvas);

    let circle = new createjs.Shape();
    circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
    circle.x = 100;
    circle.y = 100;
    stage.addChild(circle);
    stage.update();

    // CreateJS 継承テスト
    const btn1 = new CircleButton('Hi');
    btn1.x = 50;
    btn1.y = 50;
    stage.addChild(btn1);

    const btn2 = new CircleButton('Hello', 'purple', 50);
    btn2.x = 200;
    btn2.y = 50;
    stage.addChild(btn2);
    stage.update();

    console.log("OK");
}

src/CircleButton.js

// CircleButton.js
// http://blog.unshift.xyz/easeljs-custom-display-objects-in-es2015/

import * as createjs from 'EaselJS';

class CircleButton extends createjs.Container {
    constructor(text = '', color = '#222', radius = 40) {
        // Container のコンストラクタ呼び出し
        super();

        // プロパティを設定する
        this.text = text;
        this.radius = radius;
        this.color = color;

        // コンポーネントの初期化
        this.setup();
    }

    setup() {
        // circle のシェイプを作成
        const circle = new createjs.Shape();
        circle.graphics.beginFill(this.color).drawCircle(0, 0, this.radius);
        this.addChild(circle);

        // テキストを作成
        const txt = new createjs.Text(this.text, "20px Arial", "white");
        this.addChild(txt);

        // circle 内の中央にテキストを配置
        txt.x = txt.getMeasuredWidth() / 2 * -1;
        txt.y = txt.getMeasuredHeight() / 2 * -1;
    }
}

export default createjs.promote(CircleButton, "Container");

Bootstrap 使いたい

jQuery や Bootstrap もインストールしましょう.
- bower install --save jquery
- bower install --save bootstrap
webpack.config.js はこんな感じ。

var path = require('path');
var webpack = require('webpack');
var bowerResolver = new webpack.ResolverPlugin(new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main']));

module.exports = {
    entry: path.join(__dirname, 'src', 'main.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                // Babel で JS コードを ES6 -> ES5 変換
                test: /\.js$/,
                exclude: /node_modules|bower_components/,
                loader: 'babel-loader'
            },
            {
                // Webpack に CreateJS のライブラリでは `this` に `window` を参照させ、`window.createjs` を export するように設定
                test: /bower_components(\/|\\)(PreloadJS|SoundJS|EaselJS|TweenJS)(\/|\\).*\.js$/,
                loader: 'imports?this=>window!exports?window.createjs'
            },
            {
                // Webpack に Bootstrap を参照するときには jQuery が定義された状態としておく.
                test: /bower_components(\/|\\)(bootstrap)(\/|\\).*\.js$/,
                loader: 'imports?jQuery=jquery'
            }
        ]
    },
    plugins: [
        // Webpack に bower モジュールの main ファイルを発見させる
        bowerResolver
    ],
    resolve: {
        // bower_components をモジュールのルートディレクトリに追加
        modulesDirectories: ['node_modules', 'bower_components']
    }
};

ソースコード側はこんな感じ。

import $ from 'jquery';
import * as createjs from 'EaselJS';

// 特定のオブジェクトだけ読み込むなら以下のように記述
// import { Stage, Ticker } from 'EaselJS';

// Bootstrap 動作用 import
import * as bootstrap from 'bootstrap';

// 外部ファイルから読み込み
import CircleButton from './CircleButton';

{
    // jQuery の動作チェック
    console.log( $ );

    // CreateJS (EaselJS) の動作チェック
    console.log( createjs );

    const stage = new createjs.Stage(canvas);
    // const stage = new Stage(canvas);

    let circle = new createjs.Shape();
    circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
    circle.x = 100;
    circle.y = 100;
    stage.addChild(circle);
    stage.update();

    // CreateJS 継承テスト
    const btn1 = new CircleButton('Hi');
    btn1.x = 50;
    btn1.y = 50;
    stage.addChild(btn1);

    const btn2 = new CircleButton('Hello', 'purple', 50);
    btn2.x = 200;
    btn2.y = 50;
    stage.addChild(btn2);
    stage.update();
}

Webstorm で開発したいんだけど...

（注意） Mac 版での操作となっています！
まずは WebStorm で ES2015/ES6 開発ができるように設定しましょう。
- WebStorm -> Preferences... -> Languages & Frameworks -> JavaScript と開く。
- JavaScript Language Version を ECMAScript6 に設定し、 Prefer strict mode を有効化する。
- ただし、ES2015 のコードは Webpack でコンパイルするため、WebStorm の Babel watcher は有効化しない点に注意。
Run/Debug するたびに npm run build を実行させ、実行前に bundle.js を更新させるようにしましょう。
- 一度 HTML ファイルをそのまま実行させ、Run -> Edit Configurations... の中の Edit Configuration の一覧に JavaScript Debug が表示されている状態にしておきます。
- JavaScript Debug -> index.html と選択し、Before launch: Activate tool window の + から Run npm scrip を選択。
- package.json の場所を選択し、Command を run-script に、さらに Scripts を build に設定する. (npm run XXXX の XXXX の文字列を入力してください)
- これにより、index.html を Run/Debug するときに自動的に Webpack が起動し、bundle.js を更新するようになります。

WebStorm でリモートデバッグしたい！

さらに、実は WebStorm では、もともとの ES2015 のソースコードに対してブレークポイントを設定 し、ブラウザ上で Webpack によって変換されたコードが実行される際に、対応する ES2015 コード上のブレークポイントで動作を停止させることができます！
- ここではブラウザとして Chrome を使うことを想定しています
まずはブラウザにプラグインを追加します
- https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji
次に、ここを参考に、WebStorm の設定を行います
- まず、Webpack によるビルド後のディレクトリを Excluded に設定する必要がある.
  - 今回は bundle.js が dist ディレクトリに配置されることを想定していますので、dist ディレクトリのアイコン上で右クリック -> Mark Directory As -> Excluded を選択.
- WebStorm がデバッグ時に立ち上げるビルトインWebサーバのポート番号を確認する.
  - WebStorm -> Preferences -> Build, Execution, Deployment -> Debugger -> Port の値を覚えておく.
- Run -> Edit Configurations... -> JavaScript Debug と順番に開く.
- この画面上で、プロジェクトの RemoteURL を webpack:///. に設定する.
- その後、Excluded に設定した dist ディレクトリの Remote URL を http://localhost:ポート番号/debugging-webpack/dist に設定する.
- 設定後の画面は以下のようになります。

この設定後、WebStorm 上で Debug を実行すると、ブレークポイント実行が行えるようになります！

[備忘録] Webpack で CreateJS（EaselJS） などを読み込むための設定（+ ES2015設定 & WebStorm設定）

準備

webpack.config.js

src/main.js

babel を使って ES2015 スタイルで書きたい

Bootstrap 使いたい

Webstorm で開発したいんだけど...

WebStorm でリモートデバッグしたい！

[備忘録] Webpack で CreateJS（EaselJS）などを読み込むための設定（+ ES2015設定 & WebStorm設定）