使用express-intlayer 转换您的 Express 后端 API (i)

创建迎合来自不同国家和语言的用户的应用程序可以显着提高应用程序的覆盖范围和用户满意度。借助express-intlayer，向 Express 后端添加国际化 (i18n) 既简单又高效。在这篇文章中，我们将指导您设置 Express-inlayer 以使您的 Express 应用程序支持多种语言，确保为世界各地的用户提供更好的体验。

为什么要国际化您的后端？

国际化您的后端使您的应用程序能够与全球受众进行有效沟通。通过以用户的首选语言提供内容，您可以改善用户体验并使您的应用程序更易于访问。以下是考虑后端国际化的一些实际原因：

• 本地化错误消息：以用户的母语显示错误消息，以减少混乱和挫败感。
• 多语言内容检索：以多种语言从数据库中提供内容，非常适合电子商务网站或内容管理系统。
• 本地化电子邮件和通知：以收件人的首选语言发送交易电子邮件、营销活动或推送通知以提高参与度。
• 增强的用户沟通：无论是短信、系统警报还是 UI 更新，以用户语言提供都可以确保清晰度并改善整体体验。

后端国际化不仅尊重文化差异，还可以向更广泛的受众开放您的应用程序，使其更容易在全球范围内扩展。

引入 Express-Inlayer

express-intlayer 是一个专为 Express 应用程序设计的中间件，它与 intlayer 生态系统无缝集成，以处理后端的本地化。这就是为什么它是一个不错的选择：

• 轻松设置：快速配置您的 Express 应用程序，以根据用户区域设置偏好提供响应。
• TypeScript 支持： 利用 TypeScript 的静态类型来确保考虑到所有翻译键，从而减少错误。
• 灵活的配置：自定义区域设置的检测方式，无论是通过标头、cookie 还是其他方法。

有关更多详细信息，请访问完整文档。

入门

让我们逐步完成在 Express 应用程序中设置 express-inlayer 的步骤。

第1步：安装

首先，使用您首选的包管理器安装 express-intlayer 和 intlayer：

npm install intlayer express-intlayer

pnpm add intlayer express-intlayer

yarn add intlayer express-intlayer

第2步：配置

接下来，在项目的根目录中创建一个 intlayer.config.ts 文件。此文件将定义您的应用程序支持的区域设置和默认语言：

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH_MEXICO,
      Locales.SPANISH_SPAIN,
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

在此示例中，我们支持英语、法语、西班牙语（墨西哥）和西班牙语（西班牙），并将英语设置为默认语言。

第 3 步：快速中间件集成

现在，将express-inlayer集成到您的Express应用程序中。以下是在 src/index.ts 中进行设置的方法：

import express, { type Express } from "express";
import { intlayer, t } from "express-intlayer";

const app: Express = express();

// Use intlayer middleware
app.use(intlayer());

// Sample route: Serving localized content
app.get("/", (_req, res) => {
  res.send(
    t({
      en: "Example of returned content in English",
      fr: "Exemple de contenu renvoyé en français",
      "es-ES": "Ejemplo de contenido devuelto en español (España)",
      "es-MX": "Ejemplo de contenido devuelto en español (México)",
    })
  );
});

// Sample error route: Serving localized errors
app.get("/error", (_req, res) => {
  res.status(500).send(
    t({
      en: "Example of returned error content in English",
      fr: "Exemple de contenu d'erreur renvoyé en français",
      "es-ES": "Ejemplo de contenido de error devuelto en español (España)",
      "es-MX": "Ejemplo de contenido de error devuelto en español (México)",
    })
  );
});

app.listen(3000, () => {
  console.info(`Listening on port 3000`);
});

在此设置中：

• intlayer 中间件通常从 Accept-Language 标头检测用户的区域设置。
• t() 函数根据检测到的语言环境返回适当的翻译。
• 如果请求的语言不可用，它将回退到默认区域设置（在本例中为英语）。

自定义区域设置检测

默认情况下，express-intlayer 使用 Accept-Language 标头来确定用户的首选语言。但是，您可以在 intlayer.config.ts 中自定义此行为：

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // Other configuration options
  middleware: {
    headerName: "my-locale-header",
    cookieName: "my-locale-cookie",
  },
};

export default config;

这种灵活性允许您通过自定义标头、cookie 或其他机制来检测区域设置，从而使其适应各种环境和客户端类型。

与其他框架的兼容性

express-intlayer 与 intlayer 生态系统的其他部分配合良好，包括：

• react-intlayer 用于 React 应用程序
• next-intlayer 用于 Next.js 应用程序

这种集成确保了从后端到前端的整个堆栈中一致的国际化策略。

利用 TypeScript 实现强大的 i18n

express-intlayer 使用 TypeScript 构建，为您的国际化过程提供强大的类型。这意味着：

• 类型安全： 在编译时捕获丢失的翻译键。
• 提高可维护性：使用 TypeScript 工具更轻松地管理和更新翻译。
• 生成的类型：通过在 tsconfig.json 中包含生成的类型（默认位于 ./types/intlayer.d.ts），确保正确引用您的翻译。

总结

使用express-intlayer向您的Express后端添加国际化是一个明智之举，可以使您的应用程序对全球受众来说更易于访问和用户友好。凭借其简单的设置、TypeScript 支持和灵活的配置选项，express-intlayer 简化了交付本地化内容和通信的过程。

准备好让您的后端实现多语言了吗？立即开始在您的 Express 应用程序中使用express-inlayer，为世界各地的用户提供无缝体验。

有关更多详细信息、配置选项和高级使用模式，请查看官方完整文档或访问 GitHub 存储库以探索源代码并做出贡献。

以上是使用express-intlayer 转换您的 Express 后端 API (i)的详细内容。更多信息请关注PHP中文网其他相关文章！