通过Vite项目的JavaScript使用SDK for Web

最終更新： 2024年3月26日

本页介绍了通过Vite项目的JavaScript使用Cubism 5 SDK for Web Framework的步骤。

将所需文件追加到现有的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并使用要使用的模块时，编写如下。
请将要导入的模块的路径变更为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();