Use the Web Version SDK 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 for 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 set the following to add TypeScript files to Vite’s build target

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

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

Below is a sample of 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;
});

Use the Framework from JavaScript

This is how to use the TypeScript Framework from JavaScript.

If you want to import a module you want to use, write as follows
Change the path of the module to be imported to any location where the 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();
Was this article helpful?
YesNo
Please let us know what you think about this article.