CreateJS 2.0が待望のES Modules対応。使い方とwebpackによるバンドル方法

「CreateJS」は、リッチコンテンツを制作するためのJavaScriptライブラリです（参考記事「CreateJS入門サイト - ICS MEDIA」）。リッチコンテンツ作成には便利なものの、ES Moduleに対応していないのがネックでしたが、次期バージョン2.0でES Moduleに対応します。その使い方とwebpackによるバンドル方法についてまとめました。

使用準備

まずはプロジェクトを初期化します。

プロジェクトの初期化コマンド

npm init -y

続いて、ES Moduleに対応したCreateJS 2.0のパッケージ「@createjs/easeljs」、「@createjs/tweenjs」をインストールします。

CreateJSのインストールコマンド

npm i @createjs/easeljs @createjs/tweenjs

バンドル用にwebpackをインストールします。

webpackのインストールコマンド

npm i -D webpack webpack-cli

インストール手順に不明であれば、次を参照ください

• webpackのインストール手順：webpack 4入門 - ICS MEDIA
• -yや-Dなど：GulpやSassを使う時に覚えて幸せになったnpmの便利な使い方

CreateJS系のモジュールをimport

webpackでStageやTweenなどを読み込む場合は、次のようにします。

JavaScript

// EaselJS系の読み込み
import { Shape, Stage } from '@createjs/easeljs/dist/easeljs.module';
// TweenJS系の読み込み
import { Tween } from '@createjs/tweenjs/dist/tweenjs.module';

サンプルコードとバンドル

「CreateJS でのトゥイーンの作成方法 - ICS MEDIA」のデモを元に、CreateJSのES Moduleを使って簡単なデモを作りました。

JavaScript

// EaselJS系の読み込み
import { Shape, Stage } from '@createjs/easeljs/dist/easeljs.module';
// TweenJS系の読み込み
import { Tween } from '@createjs/tweenjs/dist/tweenjs.module';

const stage = new Stage('myCanvas');

const circle = new Shape();
circle.graphics.beginFill('DarkRed').drawCircle(0, 0, 50);
stage.addChild(circle);

circle.x = 300;
circle.y = 200;

Tween.get(circle, {loop: true})
  .wait(300)
  .to({x: 740, y: 400, scale: 2}, 700)
  .to({x: 400, y: 0, scale: 1.4}, 1200)
  .to({x: 500, y: 300, scale: 3}, 1200)
  .to({x: 300, y: 200, scale: 1}, 700);

update();

// 毎フレームステージを自動更新する
function update() {
  stage.update();
  requestAnimationFrame(() => update());
}

webpackを用いてバンドルします（参考記事「設定ファイル不要のwebpack 4で、BabelやTypeScriptのゼロコンフィグのビルド環境を作ってみる - Qiita」）。

バンドルコマンド

npx webpack --mode production

デモが動作している様子

バンドルが成功し、デモが動作している様子がこちらです。

ソースファイルはこちらにアップロードしました。

• kanobox/180409_createjs_esmodule

最後に

CreateJSのES Module対応は長らく待ち望んでいた機能でした。早く正式リリースされますように。

なお、本エントリーにおけるCreateJSモジュールの確認バージョンは次のとおりです。

確認バージョン

• @createjs/easeljs: 2.0.0-beta.2
• @createjs/tweenjs: 2.0.0-beta.1