接收有关即将发布的Intlayer的通知
    Creation:2025-04-18Last update:2025-06-29

    使用 Intlayer、Vite 和 Svelte 开始国际化(i18n)

    该包正在开发中。有关更多信息,请参见问题。通过点赞该问题,表达您对 Svelte 版 Intlayer 的兴趣。

    什么是 Intlayer?

    Intlayer 是一个创新的开源国际化(i18n)库,旨在简化现代 Web 应用中的多语言支持。

    使用 Intlayer,您可以:

    • 通过组件级声明式字典轻松管理翻译
    • 动态本地化元数据、路由和内容
    • 通过自动生成类型确保 TypeScript 支持,提升自动补全和错误检测
    • 受益于高级功能,如动态语言环境检测和切换。

    在 Vite 和 Svelte 应用中设置 Intlayer 的分步指南

    第一步:安装依赖

    使用 npm 安装必要的包:

    bash
    npm install intlayer svelte-intlayernpm install vite-intlayer --save-dev
    • intlayer

    • intlayer
      提供国际化工具的核心包,用于配置管理、翻译、内容声明、转译以及命令行工具

    • svelte-intlayer
      将 Intlayer 集成到 Svelte 应用中的包。它提供了用于 Svelte 国际化的上下文提供者和钩子。

    • vite-intlayer
      包含用于将 Intlayer 集成到Vite 打包工具的 Vite 插件,以及用于检测用户首选语言、管理 Cookie 和处理 URL 重定向的中间件。

    第2步:配置您的项目

    创建一个配置文件来配置您应用程序的语言:

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // 您的其他语言    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

    通过此配置文件,您可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名、禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表,请参阅配置文档

    第三步:在您的 Vite 配置中集成 Intlayer

    将 intlayer 插件添加到您的配置中。

    vite.config.ts
    import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [react(), intlayerPlugin()],});

    intlayerPlugin() Vite 插件用于将 Intlayer 集成到 Vite 中。它确保内容声明文件的构建,并在开发模式下监视这些文件。它在 Vite 应用程序中定义了 Intlayer 环境变量。此外,它还提供别名以优化性能。

    第4步:声明您的内容

    创建并管理您的内容声明以存储翻译:

    src/app.content.tsx
    import { t, type Dictionary } from "intlayer";const appContent = {  key: "app",  content: {},} satisfies Dictionary;export default appContent;

    您的内容声明可以定义在应用程序中的任何位置,只要它们被包含在 contentDir 目录中(默认是 ./src),并且文件扩展名符合内容声明文件扩展名(默认是 .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx})。

    有关更多详细信息,请参阅内容声明文档

    第5步:在代码中使用 Intlayer

    [待完成]

    (可选)第6步:更改内容语言

    [待完成]

    (可选)第7步:为您的应用添加本地化路由

    [待完成]

    (可选)第8步:在语言环境更改时更改 URL

    [待完成]

    (可选)第9步:切换 HTML 的语言和方向属性

    [待完成]

    (可选)第10步:创建本地化链接组件

    [待完成]

    Git 配置

    建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。

    要做到这一点,您可以将以下指令添加到您的 .gitignore 文件中:

    plaintext
    # 忽略 Intlayer 生成的文件.intlayer

    VS Code 扩展

    为了提升您使用 Intlayer 的开发体验,您可以安装官方的 Intlayer VS Code 扩展

    从 VS Code 市场安装

    该扩展提供:

    • 翻译键的自动补全
    • 缺失翻译的实时错误检测
    • 翻译内容的内联预览
    • 轻松创建和更新翻译的快速操作

    有关如何使用该扩展的更多详细信息,请参阅 Intlayer VS Code 扩展文档


    深入探索

    要进一步使用,您可以实现可视化编辑器或使用内容管理系统(CMS)将内容外部化。


    文档历史

    • 5.5.10 - 2025-06-29:初始化历史
    接收有关即将发布的Intlayer的通知