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

2024-07-05 12:57| 来源: 网络整理| 查看: 265

最終更新： 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(); 请问这篇文章对您有帮助吗？是否关于本报道，敬请提出您的意见及要求。

【本文地址】

公司简介

联系我们