svelte - 如何将 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...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>