Using SDK for Web from JavaScript in Vite projects

Updated: 03/26/2024

This page describes how to use Cubism 5 SDK for Web’s Framework from JavaScript in a Vite project.

Add the necessary files to an existing JavaScript Vite project

Copy the following directories from the Cubism 5 SDK for Web to your project.

• Core folder
• Framework folder

Change Vite settings in an existing project

Some additional configuration is required so that the Framework can be built in an existing JavaScript Vite project.

Vite supports TypeScript transpiling by default, so make the following setting to add TypeScript files to Vite’s build target.

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

This is all that is needed to successfully build Vite.
However, due to Vite specifications, there is no type checking during the build process.

A sample vite.config.mts is provided below.

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

Use the Framework from JavaScript

This is how to use the TypeScript Framework from JavaScript.

To import and use a desired module, use the following.
Change the path of the module to be imported to any location where live2dcubismframework is located.

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

Live2DCubismFramework.CubismFramework.CubismFramework.startup();

Import Classes in the Framework

Since the Framework is wrapped in the Live2DCubismFramework namespace, multiple imports will result in duplication.
To resolve the duplication, a different name must be specified at import time, which can be resolved by specifying as [an arbitrary name] after the namespace at import time.

In addition, an internal module can be defined with a different name by writing import [an arbitrary name] = module name .

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

CubismFramework.startup();