Как импортировать библиотеку dat.gui в проект Sapper / Svelte?

У меня есть такой стандартный проект 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: окно не определено в Object ... и т. Д.

Каким должен быть правильный способ импорта такой библиотеки в sapperjs? Спасибо


svelte sapper dat.gui
person Bernat Ferragut    schedule 15.01.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Похоже, что dat.gui вылетает, если вы require в Node. Я утверждаю, что это ошибка, и призываю вас поднять вопрос - просто потому, что ему нужна 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>
person Rich Harris    schedule 15.01.2020
comment
Это отличная новость, Рик! Это сработало как шарм, и я узнал кое-что новое;) Большое вам спасибо. Проблема решена ... обходным путем. - person Bernat Ferragut; 16.01.2020