「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 등을 로드하는 경우 다음을 수행합니다.

자바스크립트

// 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을 사용하여 간단한 데모를 만들었습니다.

자바스크립트

// 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 모듈 대응은 오랫동안 기다려온 기능이었습니다. 빨리 정식 출시됩니다.

이 항목의 CreateJS 모듈의 확인 버전은 다음과 같습니다.

확인 버전

@createjs/easeljs: 2.0.0-beta.2

@createjs/tweenjs: 2.0.0-beta.1