i18next-xhr-backend 是一款 i18next 国际化库的后端插件，可用于从服务器获取翻译资源。本文将介绍如何使用 i18next-xhr-backend 插件以及如何配置和使用它。
安装
首先，我们需要在项目中安装 i18next 和 i18next-xhr-backend：
npm install i18next i18next-xhr-backend
配置
在接下来的步骤中，我们将假设你已经创建了一个 i18next 实例。在创建实例时，我们需要添加 i18next-xhr-backend 作为后端插件。
import i18n from 'i18next';
import xhrBackend from 'i18next-xhr-backend';
i18n.use(xhrBackend).init({
// 其他参数...
});配置选项
i18next-xhr-backend 支持以下选项：
- loadPath：要加载翻译资源的 URL。
- addPath：要添加翻译资源的 URL。
- allowMultiLoading：是否允许多个请求同时发出，默认为 false。
- parse：一个自定义解析函数，用于解析服务器响应内容。默认情况下，i18next-xhr-backend 假定响应是 JSON 格式。
你可以在初始化时设置这些选项：
i18n.use(xhrBackend).init({
loadPath: '/locales/{{lng}}/{{ns}}.json',
addPath: '/locales/add/{{lng}}/{{ns}}',
allowMultiLoading: false,
parse: (data, url) => ({ resources: JSON.parse(data), url })
});使用
现在，我们已经成功安装和配置了 i18next-xhr-backend。接下来，我们可以开始使用它来获取翻译资源。
加载翻译资源
要加载翻译资源，请使用 i18next 的 loadResources 函数：
i18n.loadResources(['en'], function(err) {
// 处理错误...
console.log(i18n.t('key'));
});loadResources 接受两个参数：语言代码数组和回调函数。在回调函数中，你可以检查是否有错误，并开始使用你的翻译资源。
添加翻译资源
如果你希望从客户端向服务器添加新的翻译资源，可以使用 i18next 的 addResourceBundle 函数：
i18n.addResourceBundle('en', 'common', {
key: 'value'
});addResourceBundle 接受三个参数：语言代码、名称空间和翻译资源对象。
示例代码
以下是一个完整的示例代码，演示如何使用 i18next-xhr-backend 加载和添加翻译资源：
-- -------------------- ---- -------
------ ---- ---- ----------
------ ---------- ---- ----------------------
---------------------------
---- -----
------------ -----
--------- -------------------------------
-------- ------------------------------
------------------ ------
------ ------ ---- -- -- ---------- ----------------- --- --
---
-------------------------- ------------- -
-- ----- -
-------------------
- ---- -
---------------------------
-
---
---------------------------- --------- -
---- -------
---总结
通过使用 i18next-xhr-backend，我们可以轻松地从服务器获取翻译资源，并实现前端国际化。这个插件配置简单、易于使用，是开发多语言应用程序的有力工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38672