带有ESM模块的Tone.js

Question

我正在尝试在ESM模块上使用tone.js。(我可以使用它，在“公共”中没有问题，用一个打包机)

在html中

<script src="tests.js" type="module"></script>

和tests.js：

import * as Tone from "./Tone.js"  

给出-> Tone.Gain is not a constructor

如果我试着：

import * as Tone from "./node_modules/tone/build/esm/index.js";

然后Chrome显示状态404 Global，对于classes, version, ToneAudioBuffer, AudioContext, ToneAudioBuffers andToneBufferSource也是如此

(也许我错了，只是从ESM模块开始，但是深入到esm/index.js导入就像从“./core/context/ ToneAudioBuffer”导入{ToneAudioBuffer}“；(如果没有.js扩展，就不应该有任何ESM模块显式地添加扩展吗？)

我已经失去了其他组合，我尝试了，但没有成功，我找不到一个这样的项目工作的例子。如果可能的话，在js模块上运行Tone.js的正确方法是什么？

Answer 1

如果没有捆绑，使用模块脚本提供HTML，请尝试使用import "./node_modules/tone/build/esm/index.js";。

或者使用某种构建，然后使用推荐的导入import * as Tone from "tone";。

可以选择使用CDN，并使用上面普通的全局<script src="https://unpkg.com/tone@14.7.77/build/Tone.js"></script>或模块语法。

​

<script type="module">
import "https://unpkg.com/tone@14.7.77/build/Tone.js";

const btn = document.querySelector("button");
btn.addEventListener("click", async () => {
  await Tone.start();
  const synth = new Tone.Synth().toDestination();
  const now = Tone.now();
  synth.triggerAttack("C4", now);
  synth.triggerRelease(now + 50);
});
</script>
<button>Play</button>

​