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？（使用汇总汇总打包/转译）

Answer 1

之所以发生这种情况，是因为汇总（作为原生JavaScript模块捆绑程序）必须将所有JS都视为处于严格模式（因为JavaScript模块始终严格），即使它们是从旧格式转换过来的。

不幸的是，Tone.js的行为违反了严格模式（分配给不可写的属性）。我建议在该回购中提交问题；严格模式更快，更安全，并且没有理由不支持严格模式环境。

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

Answer 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;'
},

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

2 个答案: