javascript - 带有 ESM 模块的 Tone.js

Question

我正在尝试在 ESM 模块上使用 tone.js。 (我可以在带有 bundler 的“commonjs”中毫无问题地使用它)

在我的html中

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

和 tests.js:

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

给出 -> Tone.Gain 不是构造函数

如果我尝试:

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

然后 Chrome 显示状态 404 全局未找到，类、版本、ToneAudioBuffer、AudioContext、ToneAudioBuffers 和 ToneBufferSource 也是如此

(也许我错了，只是从 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>