为什么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所特有的，但我已经在许多其他项目中成功地使用过Tone JS (包括inside React等)。没有任何麻烦。

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

Answer 1

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

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

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

Answer 2

在rollup.config.js中放入intro:代码行可以帮我解决这个问题：

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