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

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

• 如果您在模块环境中使用htmx，我们现在为所有三种主要的JavaScript模块类型提供特定于模块类型的文件
  • ESM模块: /dist/htmx.esm.js
  • AMD模块: /dist/htmx.amd.js
  • CJS模块: /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!')">
      获取信息!
     </button>
  

  变为:

     <button hx-get="/info" hx-on:htmx:before-request="alert('Making a request!')"
                            hx-on:htmx:after-request="alert('Done making a request!')">
      获取信息!
     </button>
  注意：由于HTML中属性不区分大小写，您必须使用事件名的短横线形式。
  

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

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

let content = "<div>Hello world</div>"; // 这是将被交换到目标中的HTML
let target = api.getTarget(child);
let swapSpec = api.getSwapSpecification(child);
api.swap(target, content, swapSpec);

swap方法的文档可在JS API参考中找到

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

升级音乐

这是官方的htmx 1.x -> 2.x升级音乐: