如何将dat.gui库导入Sapper/Svelte项目？

Question

我有一个标准的Sapper项目：

routes
├── application
   ├──- index.svelte
   ├──- _brush.js
   ├──- (...etc)

我希望将库' dat.gui‘安装到我的项目中，并且我已经安装了：$ npm install --成功保存dat.gui。

<script>
    import { onMount } from 'svelte';   
    import { Brush } from './_brush.js';
    import * as dat from 'dat.gui';

    // dat.GUI
    let brushParams = { ... my chosen params}

    onMount(()=> {
        // loading dat.GUI
        let gui = new dat.GUI();
        console.log(gui);
    }

Sapper应用程序总是崩溃，并显示以下消息: ReferenceError: window is not defined at Object...etc。

哪种方法应该是将这样的库导入到sapperjs中的正确方式？谢谢

Answer 1

如果你在Node中使用require，听起来像是dat.gui崩溃了。我认为这是一个错误，并鼓励您提出一个问题-只是因为它需要一个DOM才能做任何事情，并不意味着如果在没有DOM的环境中导入模块，它就应该崩溃。

不过，我们可以解决这个问题。您可以在onMount (不在服务器上运行)中动态导入，而不是使用静态导入：

<script>
    import { onMount } from 'svelte';   
    import { Brush } from './_brush.js';

    // dat.GUI
    let brushParams = { ... my chosen params}

    onMount(()=> {
        import('dat.gui').then(dat => {
            // loading dat.GUI
            let gui = new dat.GUI();
            console.log(gui);
        });
    }
</script>