htmx 1.x 兼容性扩展

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

¥The htmx-1-compat extension allows you to almost seamlessly upgrade from htmx 1.x to htmx 2.

安装

¥Installing

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

¥The fastest way to install htmx-1-compat is to load it via a CDN. Remember to always include the core htmx library before the extension and enable the extension.

<head>
    <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/htmx-ext-htmx-1-compat@2.0.0" integrity="sha384-lcvVWaNjF5zPPUeeWmC0OkJ2MLqoWLlkAabuGm+EuMSTfGo5WRyHrNaAp0cJr9Pg" crossorigin="anonymous"></script>
</head>
<body hx-ext="htmx-1-compat">
...

https://unpkg.com/htmx-ext-htmx-1-compat/dist/htmx-1-compat.js 上还有一个未缩小的版本。

¥An unminified version is also available at https://unpkg.com/htmx-ext-htmx-1-compat/dist/htmx-1-compat.js.

虽然 CDN 方法很简单，但你可能需要考虑在生产中不使用 CDN。安装 htmx-1-compat 的下一个最简单的方法是将其复制到你的项目中。从 https://unpkg.com/htmx-ext-htmx-1-compat 下载扩展，将其添加到项目中的相应目录中，并在必要时使用 <script> 标签将其包含在内。

¥While the CDN approach is simple, you may want to consider not using CDNs in production. The next easiest way to install htmx-1-compat is to simply copy it into your project. Download the extension from https://unpkg.com/htmx-ext-htmx-1-compat, add it to the appropriate directory in your project and include it where necessary with a <script> tag.

对于 npm 样式的构建系统，你可以通过 npm 安装 htmx-1-compat：

¥For npm-style build systems, you can install htmx-1-compat via npm:

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 核心和项目特定代码打包在一起。

¥After installing, you’ll need to use appropriate tooling to bundle node_modules/htmx-ext-htmx-1-compat/dist/htmx-1-compat.js (or .min.js). For example, you might bundle the extension with htmx core from node_modules/htmx.org/dist/htmx.js and project-specific code.

如果你使用打包器来管理你的 javascript（例如 Webpack、Rollup）：

¥If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):

通过 npm 安装 htmx.org 和 htmx-ext-htmx-1-compat

¥Install htmx.org and htmx-ext-htmx-1-compat via npm
将两个包导入到你的 index.js

¥Import both packages to your index.js

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

它涵盖的内容

¥What it covers

Htmx 2 引入了一些重大更改。

¥Htmx 2 introduced a few breaking changes.

为了使从 htmx 1.x 升级到 htmx 2 更加容易，我们提供了此扩展来恢复其中的大部分内容，因此你可以从其他更改中受益而不会破坏你的应用。

¥To make upgrading from htmx 1.x to htmx 2 easier, we’re providing this extension that reverts most of those, so you’re able to benefit from the other changes without breaking your application.

过时的属性

¥Obsolete attributes

htmx 2 删除了已弃用的 hx-ws 和 hx-sse 属性，此扩展将恢复这些属性。

¥htmx 2 removed the deprecated hx-ws and hx-sse attributes, that this extension restores.
htmx 2 删除了已弃用的 hx-on 属性，转而使用通配符 hx-on* 属性，此扩展将恢复这些属性。

¥htmx 2 removed the deprecated hx-on attribute in favor of the wildcard hx-on* attribute, that this extension restores.

默认更改

¥Default Changes

将 htmx.config.scrollBehavior 恢复为 ‘smooth’。

¥reverts htmx.config.scrollBehavior to ‘smooth’.
使 DELETE 请求使用表单编码的主体而不是 URL 参数（htmx 2 按照规范默认使用 DELETE 的 URL 参数）。

¥makes DELETE requests use a form-encoded body rather than URL parameters (htmx 2 uses URL parameters for DELETE as default as per the spec).
默认允许跨域请求（htmx 2 现在默认禁止跨域请求）。

¥allows cross-domain requests by default (htmx 2 now forbids it by default).

它不涵盖的内容

¥What it does not cover

IE11 支持在 htmx 2 中被放弃，此扩展无法恢复。如果你需要 IE11 支持，请继续使用将继续受支持的 htmx 1。

¥IE11 support was dropped in htmx 2, and this extension cannot revert that. If you need IE11 support, please stay with htmx 1 that will continue being supported.
htmx 2 向扩展 API 引入了交换方法这一重大变化。如果你仅使用核心扩展，则不需要任何额外工作。如果你使用自定义或社区扩展，请确保它们已更新以与 htmx 2 的 API 配合使用。

¥htmx 2 introduced the breaking change that is the swap method to the extensions API. If you were only using core extensions, then you shouldn’t need any additional work. If you were using custom or community extensions, make sure that they were updated to work with htmx 2’s API.