CDN

@neongate-ai/orbz/standalone 是独立 ES 模块，适合不使用包管理器或打包工具的页面。它会自动注册 <orb-z>，并提供与 /browser 相同的原生组件 API。

这些 URL 固定为已发布的 1.0.2，防止未来的 latest 标签意外改变组件契约。

jsDelivr


<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@neongate-ai/orbz@1.0.2/dist/standalone/orbz.js"
></script>

unpkg


<script
  type="module"
  src="https://unpkg.com/@neongate-ai/orbz@1.0.2/dist/standalone/orbz.js"
></script>

包清单的 unpkg 和 jsdelivr 元数据指向同一个文件。以上明确的文件 URL 便于确认产物及版本。

完整页面

index.html


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Orbz voice assistant</title>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@neongate-ai/orbz@1.0.2/dist/standalone/orbz.js"
    ></script>
  </head>
  <body>
    <main>
      <div role="status" aria-live="polite">
        <orb-z
          state="idle"
          size="300px"
          speed="1"
          reduced-motion="system"
          elevated
        ></orb-z>
        <p id="assistant-status">Assistant is idle</p>
      </div>
 
      <button id="listen" type="button">Listen</button>
    </main>
 
    <script type="module">
      await customElements.whenDefined("orb-z");
 
      const orb = document.querySelector("orb-z");
      const status = document.querySelector("#assistant-status");
      const listen = document.querySelector("#listen");
 
      listen?.addEventListener("click", () => {
        if (orb) orb.state = "listening";
        if (status) status.textContent = "Assistant is listening";
      });
    </script>
  </body>
</html>

模块加载完成后，浏览器会升级已有标签。只有需要立即调用 Orbz 属性或方法时，才需要等待 customElements.whenDefined("orb-z")。

固定版本

生产环境请使用精确的包版本：


@neongate-ai/orbz@1.0.2

避免无版本 URL 或变化的 latest 标签。固定版本可使部署之间的组件契约与外观保持稳定。阅读更新日志后再有计划地升级。

何时优先使用 npm

CDN 构建适用于独立页面、嵌入内容、原型或有意自行管理浏览器依赖的微前端。当构建系统需要去重依赖、检查配置类型或锁定完整依赖图时，优先选择 npm 入口。