构建Web范例

最終更新: 2024年3月26日

本页说明使用Visual Studio Code在Windows上转换Live2D Cubism SDK for Web中包含的TypeScript范例项目的步骤。

* 文章内容使用Cubism 5 SDK for Web R1。
方法和步骤可能因Cubism SDK的版本而异。 

必要的项目

·Live2D Cubism SDK for Web

这是SDK本体。从“官方下载页”下载。

·Node.js

这是JavaScript的执行环境。

·Visual Studio Code

这是本次使用的开发环境。该语言使用TypeScript。

安装作业

1. Visual Studio Code

安装并开启Visual Studio Code后,打开Cubism SDK for Web的顶层文件夹,并将以下内容安装为扩展功能。

·EditorConfig for VS Code

这是开发工具。
用于统一代码格式。

也可以通过在扩展功能的搜索窗口中输入“@recommended”来显示。

安装完成后,重启Editor使扩展功能有效。

2. Node.js

安装Node.js作为构建所需的各包的管理和JavaScript的执行环境。
使用官方网站上的安装程序进行安装。
安装完成后,打开命令提示符,输入

node --version
npm --version

,查看npm命令是否可用。
输出版本信息即为成功。

3. Vite를 비롯한 빌드 및 실행에 필요한 각 패키지

Vite의 도입과 TypeScript, JavaScript의 종속성 등을 해결하기 위해 필요한 패키지를 설치합니다.

您可以在打开Cubism SDK for Web文件夹的Visual Studio Code上,按“ctrl + shift + P”,从“Task: Run Task”选择“npm: install – Samples/TypeScript/Demo”来进行安装。

构建

构建时,在Visual Studio Code上打开Cubism SDK for Web的顶层目录,

将从菜单栏中通过Terminal → Run Build Task… 或“ctrl + shift + B”显示构建任务列表,选择“npm: build – Samples/TypeScript/Demo”等,并执行构建。

빌드 완료 후 Samples/TypeScript/Demo 폴더 내에 dist 폴더가 생성되고, 그 안에 자바스크립트 파일(index.js)이 출력된다.
이 dist 폴더 안에는 Cubism Core와 Live2D 모델의 리소스 등도 포함된다.

执行

如果构建成功,下一步就是执行它。

要检查执行,请在打开Cubism SDK for Web的文件夹Visual Studio Code上按“ctrl + shift + P”,然后从“Task: Run Task”选择“npm: serve – Samples/TypeScript/Demo”,以开启简单的本地服务器。

在本地服务器开启的情况下,按F5键或从菜单栏中选择Debug> Start Debugging,即可开启Debugger for Chrome并进行调试。
当系统提示您仅第一次选择配置时,请选择remote web site with sourcemap。

浏览器开启成功、出现画面并显示模型,即为成功。

您也可以通过任意浏览器访问[npm: Serve显示的地址]/Samples/TypeScript/Demo/,查看index.html。

这时候如果有端口冲突等,连接可能会被拒绝,
所以在这种情况下,请检查“/Samples/TypeScript/Demo/package.json”中“serve”项目指定的端口号是否冲突。

// 在-p后面指定端口号
"serve": "vite preview –port  5000",

端口号也在 Vite 配置文件 vite.config.mts 中指定。

 server: {
   port: 5000,
 },

此外,如果您使用 Chrome 浏览器调试器进行开发,连接 URL 会在”/.vscode/launch.json “的 “url “项中指定,因此也请检查这一项。

"url": "http://localhost:5000/",
请问这篇文章对您有帮助吗?
关于本报道,敬请提出您的意见及要求。