JavaScript에서 Web 버전 SDK 사용

업데이트： 2020/01/30

이 페이지에서는 Cubism 4 SDK for Web의 Framework를 JavaScript의 webpack 프로젝트에서 사용하는 절차를 소개합니다.

기존 JavaScript의 webpack 프로젝트에 필요한 파일 추가

Cubism 4 SDK for Web에서 다음 디렉토리를 프로젝트에 복사합니다.

• Core 폴더
• Framework 폴더

기존 프로젝트에 패키지 추가

기존 JavaScript의 webpack 프로젝트에서 TypeScript를 빌드하기 위해 ts-loader 패키지를 추가합니다.

프로젝트에서 다음 명령을 입력하면 package.json에 패키지가 추가됩니다. 

npm install --save-dev ts-loader

기존 프로젝트의 webpack 설정 변경

기존 JavaScript의 webpack 프로젝트에서 Framework를 빌드할 수 있도록 몇 가지 추가 설정을 구성합니다.

우선, TypeScript 파일을 webpack의 빌드 대상에 추가하기 위해서 이하를 설정합니다.

module.exports = {
  ...
  resolve: {
    extensions: ['.ts', '.js']
  } ... }

그런 다음 webpack이 빌드 시 TypeScript를 변환하기 위해 다음 설정을 추가합니다.

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  }
  ...
}

이상으로 webpack 빌드를 정상적으로 실시할 수 있게 됩니다.

아래에 webpack.config.js의 샘플을 게재합니다.

var path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  }
}

JavaScript에서 Framework 사용

JavaScript에서 TypeScript 프레임워크를 사용하는 방법입니다.

사용하고 싶은 모듈을 import하여 이용하는 경우 다음과 같이 기술합니다.

import { Live2DCubismFramework } from "../../../../Framework/live2dcubismframework";

Live2DCubismFramework.CubismFramework.CubismFramework.startup();

프레임워크 내 클래스 가져오기

프레임워크는 이름 공간 Live2DCubismFramework로 래핑되어 있기 때문에 복수 import하면 중복됩니다.
중복을 해결하려면 import 시에 다른 이름을 지정할 필요가 있는데, import 시의 이름 공간의 뒤에 as [임의의 이름]을 지정하는 것으로 해결할 수 있습니다. 

또한 import [임의의 이름] = 모듈 이름으로 작성하여 내부 모듈을 다른 이름으로 정의할 수 있습니다. 

import { Live2DCubismFramework as live2dcubismframework } from '../../../../Framework/live2dcubismframework';
import CubismFramework = live2dcubismframework.CubismFramework;

CubismFramework.startup();