Блог

Главная - Вопросы по программированию - Почему Tone JS плохо воспроизводится в изящном компоненте?

Почему Tone JS плохо воспроизводится в изящном компоненте?

#javascript #rollupjs #svelte #svelte-component

#javascript #rollupjs #изящный #изящный компонент

Вопрос:

Я довольно новичок в Svelte (я использую версию 2, пока не будет должным образом выпущена 3), и я создаю сайт, целью которого является некоторый анализ звука (FFT). Поэтому я включаю почтенную библиотеку ToneJS (http://tonejs.github.io /) в одном из моих компонентов.

По какой-то причине простого импорта ToneJS достаточно для сбоя всего приложения.

Вот весь мой изящный компонент:

 <h2>Pitch analyser</h2>


<script>
    import Tone from 'tone';

</script>

Это вызывает ошибку:

 Tone.js:7 Uncaught TypeError: Cannot assign to read only property 'listener' of object '#<AudioContext>'
at t.Context.set (Tone.js:7)
at t.Listener.<anonymous> (Tone.js:7)
at Function.e.getContext (Tone.js:7)
at new t.Listener (Tone.js:7)
at Object.<anonymous> (Tone.js:7)
at Object.<anonymous> (Tone.js:7)
at i (Tone.js:1)
at Object.<anonymous> (Tone.js:7)
at i (Tone.js:1)
at Tone.js:1

Возможно, это не специфично для Svelte, но я успешно использовал Tone JS во многих других проектах (в том числе внутри React и т.д.) Без каких-либо проблем.

Что может быть причиной этого? И как начать использовать ToneJS в моем компактном приложении? (Упаковано / перенесено с использованием свертки)

Комментарии:

1. Кажется, что при использовании webpack эта проблема не возникает. Должно быть что-то в способе свертывания пакетов ToneJS.

2. Похоже, проблема не в накопительной части.

Ответ №1:

Это происходит потому, что Rollup, как собственный модульный пакет JavaScript, должен обрабатывать все JS так, как если бы он находился в строгом режиме (потому что модули JavaScript всегда являются строгими), даже когда они конвертированы из устаревших форматов.

К сожалению Tone.js делает вещи, которые нарушают строгий режим (присваивает недоступным для записи свойствам). Я бы рекомендовал сообщить о проблеме в этом репозитории; строгий режим быстрее и безопаснее, и на самом деле нет причин не поддерживать среды строгого режима.

Тем временем вы можете обойти это, включив Tone.js как обычный <script> тег и ссылаться на него в вашем приложении как на глобальный.

Ответ №2:

Ввод intro: строки rollup.config.js исправил это для меня:

 output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/bundle.js',
    // Added this line:
    intro: 'var global = typeof self !== undefined ? self : this;'
},