在 Vite 项目中通过JavaScript使用Web版SDK

最終更新: 2024年3月26日

本页提供了在 Vite 项目中通过 JavaScript 使用 Cubism 5 SDK for Web 中的框架的说明。

将所需文件追加到现有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框架的方法。

如果你想导入一个你想使用的模块,写法如下。
将要导入模块的路径改为 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();
请问这篇文章对您有帮助吗?
关于本报道,敬请提出您的意见及要求。