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

Question

我有一个像这样的标准 Sapper 项目：

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

我希望将库 'dat.gui' 安装到我的项目中，并且我已成功安装：$ npm install --save 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...等。

将这样的库导入 sapperjs 应该是正确的方法？谢谢

Answer 1

如果你在 Node.js 中 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>