使用 Intlayer 在 Express 中实现后端国际化 (i18n)

164 阅读2分钟

大家好!

最近我需要为基于 Express 的 API 添加多语言支持。我想分享一个简短的教程,供那些希望根据用户的首选语言让后端响应翻译内容的开发者参考。

为什么要为后端国际化?

以下是后端国际化的一些实际应用场景:

  • 以用户语言显示后端错误信息: 以用户的母语显示错误信息,以提高理解度并减少挫败感。这允许错误信息直接以 toast 形式显示,而无需在前端进行映射。
  • 发送多语言的电子邮件、推送通知等: 通过以收件人的语言发送事务性、营销或通知电子邮件来提高参与度。将推送通知、短信消息本地化,以确保清晰度并增强用户体验。
  • 检索多语言内容: 从数据库中以多种语言提供内容。

开始使用

安装

首先,使用您喜欢的包管理器安装必要的包:

npm install intlayer express-intlayer

设置

接下来,通过在项目根目录创建 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;

Express 应用设置

现在,设置您的 Express 应用以使用 express-intlayer

// src/index.ts
import express, { type Express } from "express";
import { intlayer, t } from "express-intlayer";

const app: Express = express();

// 加载国际化请求处理器
app.use(intlayer());

// 路由
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)",
    })
  );
});

// 启动服务器
app.listen(3000);

兼容性

express-intlayer 可以与 react-intlayernext-intlayer 无缝协作。同时,它也兼容各种国际化解决方案。

自定义区域检测

默认情况下,express-intlayer 使用 Accept-Language 头来确定客户端的首选语言。您可以自定义此行为,通过头信息或 cookie 来检测区域设置:

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

const config: IntlayerConfig = {
  // 其他配置选项
  middleware: {
    headerName: "my-locale-header",
    cookieName: "my-locale-cookie",
  },
};

欢迎查看官方文档以了解更多高级配置和功能 以及功能和解决方案的官方网站