htmx 1.x 兼容性扩展

htmx-1-compat 扩展允许您几乎无缝地将 htmx 1.x 升级到 htmx 2。

安装

安装 htmx-1-compat 的最快方式是通过 CDN 加载。请记住，始终在扩展之前包含核心 htmx 库，并启用该扩展。

<head>
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js" integrity="sha384-ZBXiYtYQ6hJ2Y0ZNoYuI+Nq5MqWBr+chMrS/RkXpNzQCApHEhOt2aY8EJgqwHLkJ" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/htmx-ext-htmx-1-compat@2.0.0" integrity="sha384-lcvVWaNjF5zPPUeeWmC0OkJ2MLqoWLlkAabuGm+EuMSTfGo5WRyHrNaAp0cJr9Pg" crossorigin="anonymous"></script>
</head>
<body hx-ext="htmx-1-compat">
...

未压缩版本也可从 https://cdn.jsdelivr.net/npm/htmx-ext-htmx-1-compat/dist/htmx-1-compat.js 获取。

虽然 CDN 方法简单，但您可能需要考虑在生产环境中不使用 CDN。安装 htmx-1-compat 的下一个最简单方法是将它复制到您的项目中。从 https://cdn.jsdelivr.net/npm/htmx-ext-htmx-1-compat 下载扩展，将其添加到项目中的适当目录，并在需要时使用 <script> 标签包含它。

对于 npm 风格的构建系统，您可以通过 npm 安装 htmx-1-compat：

npm install htmx-ext-htmx-1-compat

安装后，您需要使用适当的工具将 node_modules/htmx-ext-htmx-1-compat/dist/htmx-1-compat.js（或 .min.js）打包。例如，您可以将扩展与来自 node_modules/htmx.org/dist/htmx.js 的 htmx 核心以及项目特定代码打包。

如果您使用打包器管理 JavaScript（例如 Webpack、Rollup）：

通过 npm 安装 htmx.org 和 htmx-ext-htmx-1-compat
将两个包导入到您的 index.js

import `htmx.org`;
import `htmx-ext-htmx-1-compat`;

它覆盖的内容

Htmx 2 引入了一些破坏性变更。

为了使从 htmx 1.x 升级到 htmx 2 更容易，我们提供了这个扩展，它会回退其中大部分变更，因此您可以从其他变更中受益，而不会破坏您的应用程序。

过时的属性

htmx 2 移除了已弃用的 hx-ws 和 hx-sse 属性，该扩展会恢复它们。
htmx 2 移除了已弃用的 hx-on 属性，转而使用通配符 hx-on* 属性，该扩展会恢复它。

默认变更

将 htmx.config.scrollBehavior 回退为 ‘smooth’。
使 DELETE 请求使用表单编码的正文而不是 URL 参数（htmx 2 默认使用 URL 参数作为规范中的 DELETE）。
默认允许跨域请求（htmx 2 现在默认禁止它）。

它不覆盖的内容

htmx 2 放弃了对 IE11 的支持，该扩展无法回退此变更。如果您需要 IE11 支持，请继续使用 htmx 1，它将继续得到支持。
htmx 2 引入了对扩展 API 的破坏性变更，即 swap 方法。如果您仅使用核心扩展，则无需额外工作。如果您使用自定义或社区扩展，请确保它们已更新以兼容 htmx 2 的 API。