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.6/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" 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 参数）。
默认允许跨域请求（htmx 2 现在默认禁止）。

未覆盖范围

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