intlayer: NPM包用于管理多语言内容声明（i18n）

Intlayer 是一套专为JavaScript开发者设计的包。它与React、Next.js和Express.js等框架兼容。

intlayer包 允许您在代码中的任何地方声明内容。它将多语言内容声明转换为结构化的字典，无缝集成到您的应用程序中。通过TypeScript，Intlayer通过提供更强大、更高效的工具增强您的开发。

为什么集成Intlayer？

• 基于JavaScript的内容管理：利用JavaScript的灵活性高效地定义和管理您的内容。
• 类型安全的环境：利用TypeScript确保您所有的内容定义都是精确的且无错误的。
• 集成内容文件：将您的翻译与相应的组件紧密结合，提高可维护性和清晰性。

安装

使用您的首选包管理器安装必要的包：

npm install intlayer

配置Intlayer

Intlayer提供一个配置文件以设置您的项目。将此文件放在项目根目录中。

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

有关可用参数的完整列表，请参考配置文档。

使用示例

使用Intlayer，您可以在代码库中的任何地方以结构化的方式声明您的内容。

默认情况下，Intlayer扫描扩展名为 .content.{ts,tsx,js,jsx,mjs,cjs} 的文件。

您可以通过在配置文件中设置 contentDir 属性来修改默认扩展名。

.├── intlayer.config.ts└── src    ├── ClientComponent    │   ├── index.content.ts    │   └── index.tsx    └── ServerComponent        ├── index.content.ts        └── index.tsx

声明您的内容

这是一个内容声明的示例：

import { type DeclarationContent, t } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    numberOfCar: enu({      "<-1": "少于一辆车",      "-1": "减去一辆车",      "0": "没有车",      "1": "一辆车",      ">5": "几辆车",      ">19": "很多车",    }),  },} satisfies DeclarationContent;export default clientComponentContent;

构建您的字典

您可以使用intlayer-cli构建您的字典。

npx intlayer build

该命令扫描所有 *.content.* 文件，编译它们，并将结果写入您 intlayer.config.ts 中指定的目录（默认是 ./.intlayer）。

典型的输出可能如下所示：

.├── .intlayer│   ├── dictionary  # 包含您内容的字典│   │   ├── client-component.json│   │   └── server-component.json│   ├── main  # 包含您字典的入口点，可用于您的应用程序│   │   ├── dictionary.cjs│   │   └── dictionary.mjs│   └── types  # 包含您字典的自动生成的类型定义│       ├── client-component.d.ts│       └── server-component.d.ts└── types    └── intlayer.d.ts  # 包含Intlayer的自动生成类型定义

构建i18next资源

Intlayer可以配置为为i18next构建字典。为此，您需要将以下配置添加到您的 intlayer.config.ts 文件中：

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // 告诉Intlayer为i18next生成消息文件    dictionaryOutput: ["i18next"],    // Intlayer将写入您的消息JSON文件的目录    i18nextResourcesDir: "./i18next/resources",  },};

有关可用参数的完整列表，请参考配置文档。

输出：

.└── i18next    └── resources        ├── en        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

例如，en/client-component.json 可能如下所示：

{  "myTranslatedContent": "Hello World",  "zero_numberOfCar": "没有车",  "one_numberOfCar": "一辆车",  "two_numberOfCar": "两辆车",  "other_numberOfCar": "几辆车"}

构建i18next或next-intl字典

Intlayer可以配置为为i18next或next-intl构建字典。为此，您需要将以下配置添加到您的 intlayer.config.ts 文件中：

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // 告诉Intlayer为next-intl生成消息文件    dictionaryOutput: ["next-intl"],    // Intlayer将写入您的消息JSON文件的目录    nextIntlMessagesDir: "./i18next/messages",  },};

有关可用参数的完整列表，请参考配置文档。

输出：

.└── intl    └── messages        ├── en        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

例如，en/client-component.json 可能如下所示：

{  "myTranslatedContent": "Hello World",  "zero_numberOfCar": "没有车",  "one_numberOfCar": "一辆车",  "two_numberOfCar": "两辆车",  "other_numberOfCar": "几辆车"}

CLI工具

Intlayer提供一个CLI工具，用于：

• 审核您的内容声明并完成缺失的翻译
• 从您的内容声明构建字典
• 从您的CMS推送和拉取远程字典到您的本地项目

请参考intlayer-cli以获取更多信息。

在您的应用程序中使用Intlayer

在声明您的内容后，您可以在应用程序中使用您的Intlayer字典。

Intlayer作为您应用程序的一个包可用。

React应用程序

要在您的React应用程序中使用Intlayer，您可以使用react-intlayer。

Next.js应用程序

要在您的Next.js应用程序中使用Intlayer，您可以使用next-intlayer。

Express应用程序

要在您的Express应用程序中使用Intlayer，您可以使用express-intlayer。

intlayer包提供的函数

intlayer包还提供一些函数来帮助您国际化您的应用程序。

• getConfiguration()
• getTranslationContent()
• getEnumerationContent()
• getLocaleName()
• getLocaleLang()
• getHTMLTextDir()
• getPathWithoutLocale()
• getMultilingualUrls()
• getLocalizedUrl()
• getPathWithoutLocale()