htmx 1.x → htmx 2.x 迁移指南

本指南的目的是提供从 htmx 1.x 迁移到 htmx 2.x 的说明。 我们非常重视向后兼容性，因此在大多数情况下，此迁移应该需要很少的工作，甚至不需要任何工作。

• 如果您在模块设置中使用 htmx，我们现在为所有三种主要的 JavaScript 模块类型提供特定模块类型的文件
  • ESM Modules: /dist/htmx.esm.js
  • AMD Modules: /dist/htmx.amd.js
  • CJS Modules: /dist/htmx.cjs.js
  • /dist/htmx.js 文件继续支持浏览器加载
• 所有扩展已从核心 htmx 分发中移除，并单独分发。虽然许多 1.x 扩展将继续与 htmx 2 兼容，但您必须将 SSE 扩展升级到 2.x 版本，并且建议将所有扩展升级到 2.x 版本。
• 如果您仍在使用旧版的 hx-ws 和 hx-sse 属性，请升级到扩展版本
• 默认更改
  • 如果您希望保留 1.0 的默认“平滑滚动”行为，请将 htmx.config.scrollBehavior 还原为 'smooth'
  • 如果您希望 DELETE 请求使用表单编码的主体而不是参数，请将 htmx.config.methodsThatUseUrlParams 还原为 ["get"]（这有点疯狂，但根据规范，DELETE 应该像 GET 一样使用请求参数。）
  • 如果您希望使用 htmx 进行跨域请求，请将 htmx.config.selfRequestsOnly 还原为 false
• 将任何 hx-on 属性转换为其 hx-on: 等效形式：

     <button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')
                                   htmx:afterRequest: alert('Done making a request!')">
      Get Info!
     </button>
  

  变为：

     <button hx-get="/info" hx-on:htmx:before-request="alert('Making a request!')"
                            hx-on:htmx:after-request="alert('Done making a request!')">
      Get Info!
     </button>
  请注意，由于 HTML 中的属性不区分大小写，您必须使用事件名称的 kebab-case 形式。
  

• htmx.makeFragment() 方法现在 始终 返回 DocumentFragment，而不是 Element 或 DocumentFragment
• 如果您是扩展作者，并且您的扩展使用了内部 API 中的 selectAndSwap 方法，它已被移除并替换为 swap 方法， 该方法可从内部和公共 htmx API 两者中访问

要使用新方法进行交换，您只需使用

let content = "<div>Hello world</div>"; // this is HTML that will be swapped into target
let target = api.getTarget(child);
let swapSpec = api.getSwapSpecification(child);
api.swap(target, content, swapSpec);

swap 方法文档可在 JS API Reference 中找到

htmx 2.0 不再支持 IE，但 htmx 1.x 继续支持 IE，并将在可预见的未来继续支持。

升级音乐

这是官方的 htmx 1.x → 2.x 升级音乐：