Use the Web Version SDK from JavaScript

Updated: 01/30/2020

This page will guide you through the steps to use the Cubism 4 SDK for Web Framework from a JavaScript webpack project.

Add the Necessary Files to an Existing JavaScript Webpack Project

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

• Core folder
• Framework folder

Add Packages to an Existing Project

In an existing JavaScript webpack project, add the ts-loader package to build TypeScript.

Entering the following command on the project will add the package to package.json.

npm install --save-dev ts-loader

Change Webpack Settings for an Existing Project

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

First, configure the following to add the TypeScript file to the webpack build target.

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

Next, add the following settings for webpack to convert TypeScript at build time.

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

You can now successfully build webpack.

Below is a sample of 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'
      }
    ]
  }
}

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.

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