如何使用 svelte 应用程序导入设置 colyseus？

Question

我正在尝试使用 Svelte 启动 colyseus 应用程序。

我正在导入 colyseus 使用：

import { Client } from 'colyseus.js'

这构建良好，但在运行应用程序时给我以下消息：

Creating a browser bundle that depends on "https", "http" and "url". You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node

- @colyseus/schema

LiveReload enabled
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
https (guessing 'https')
http (guessing 'http')
url (guessing 'url')

在浏览器中，应用程序崩溃并显示以下控制台消息：

Uncaught ReferenceError: https is not defined
    at main.js:8:2

我已尝试设置日志中引用的 rollup-plugin-polyfill-node，但这并不能解决问题

我也是 Svelte/rollup 等方面的新手，所以如果能简单解释一下我做错了什么，将不胜感激！

Answer 1

Colyseus.js（客户端库）在服务器环境中不能运行，因此你想动态导入Colyseus.js和运行设置代码component/page 已挂载，且仅在浏览器环境中。

假设这是一个 SvelteKit 应用程序，以下脚本（在页面或组件中）应该可以工作：

<script>
    import { onMount } from 'svelte';
    import { browser } from '$app/env';

    async function connect() {
        let Colyseus = await import("colyseus.js");
        let client = new Colyseus.Client('ws://localhost:2567'); // or whereever your colyseus server instance is
        let room = await client.joinOrCreate("roomname", { /* options */ });
        // good to go
    }

    onMount(() => {
        if(browser) connect();
    })
</script>

关键是有条件地动态导入 Colyseus。常规导入也会将其导入服务器。

如何使用 svelte 应用程序导入设置 colyseus？

How do I import setup colyseus with a svelte app?

rollup

svelte

colyseus