Vite 프로젝트의 JavaScript에서 SDK for Web 사용

업데이트： 2024/03/26

이 페이지에서는 Cubism 5 SDK for Web의 Framework를 Vite 프로젝트의 JavaScript에서 사용하기 위한 순서를 소개합니다.

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

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

• Core 폴더
• Framework 폴더

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

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

Vite는 기본적으로 TypeScript 트랜스파일을 지원하므로 TypeScript 파일을 Vite 빌드 대상에 추가하기 위해 다음을 설정합니다.

let common: UserConfig = {
  ...
  resolve: {
    extensions: ['.ts', '.js']
  }
  ...
}

이상으로 Vite 빌드를 정상적으로 실시할 수 있게 됩니다.
단, Vite의 사양으로 인해 빌드 시 유형 체크는 없습니다.

아래에 vite.config.mts의 샘플을 게재합니다.

import { defineConfig, UserConfig, ConfigEnv } from 'vite';
import path from 'path';

export default defineConfig((env: ConfigEnv): UserConfig => {
  let common: UserConfig = {
    server: {
      port: 5000,
    },
    root: './',
    base: '/',
    publicDir: './public',
    resolve: {
      extensions: ['.ts', '.js'],
      alias: {
        '@framework': path.resolve(__dirname, '../../../Framework/src'),
      }
    },
    build: {
      target: 'modules',
      assetsDir: 'assets',
      outDir: './dist',
      sourcemap: env.mode == 'development' ? true : false,
    },
  };
  return common;
});

JavaScript에서 Framework 사용

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

사용하고 싶은 모듈을 import하여 이용하는 경우 다음과 같이 기술합니다.
import할 모듈의 경로를 live2dcubismframework가 있는 임의의 위치로 변경하십시오.

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();