JavaScript에서 웹 버전 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에 패키지가 추가됩니다.

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

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

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

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

이것으로 webpack 빌드를 성공적으로 할 수 있습니다.

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

JavaScript에서 Framework 사용

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

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

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

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

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

© 2010 - 2022 Live2D Inc.