javascript - 为什么 Tone JS 在 Svelte 组件中表现不佳？

Question

我是 Svelte 的新手(我一直在使用版本 2，直到版本 3 正确发布)并且我正在构建一个旨在进行音频分析 (FFT) 的网站。因此，我将古老的 ToneJS 库 ( http://tonejs.github.io/) 合并到我的一个组件中。

出于某种原因，仅导入 ToneJS 就足以使整个应用程序崩溃。

这是我的 Svelte 组件的全部内容:

<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 特有的，但我已经在许多其他项目(包括 React 等内部)中成功使用 Tone JS，没有任何问题。

这可能是什么原因造成的？以及如何在我的 Svelte 应用程序中开始使用 ToneJS？ (使用 Rollup 打包/转译)

Answer 1

发生这种情况是因为 Rollup 作为原生 JavaScript 模块打包器，必须将所有 JS 视为处于严格模式(因为 JavaScript 模块始终是严格模式)，即使它们是从遗留格式转换而来的。

不幸的是，Tone.js 正在做一些违反严格模式的事情(分配给不可写的属性)。我建议在该 repo 协议(protocol)上提交问题；严格模式更快、更安全，没有理由不支持严格模式环境。

与此同时，您可以通过将 Tone.js 作为常规 <script> 来解决这个问题标记并在您的应用中将其作为全局引用。