Svelte-i18n 国际化方案入门指南

Svelte-i18n 国际化方案入门指南

前言

在现代前端开发中，多语言支持已成为构建全球化应用的必备功能。svelte-i18n 是一个专为 Svelte 框架设计的国际化解决方案，它提供了简洁的 API 和高效的运行时性能，帮助开发者轻松实现应用的本地化。

安装与配置

基础安装

首先需要通过包管理器安装 svelte-i18n 核心库：

yarn add svelte-i18n

如果使用 Rollup 作为构建工具，还需要安装 JSON 文件导入插件：

yarn add -D @rollup/plugin-json

开发工具推荐

对于使用 VSCode 的开发者，建议安装 i18n-ally 扩展，它能在开发过程中实时预览多语言文本，显著提升开发效率。

语言字典结构

svelte-i18n 使用 JSON 格式的语言字典来管理不同语言的文本内容。每个语言对应一个独立的 JSON 文件，其中包含键值对形式的翻译文本。

示例英语和葡萄牙语字典：

// en.json
{
  "page_title": "Page title",
  "sign_in": "Sign in",
  "sign_up": "Sign up"
}

// pt.json
{
  "page_title": "Título da página",
  "sign_in": "Entrar",
  "sign_up": "Registrar"
}

加载语言字典

svelte-i18n 提供两种字典加载方式，适应不同场景需求。

同步加载

适合小型应用或开发环境，直接导入 JSON 文件并使用 addMessages 方法注册：

import { addMessages } from 'svelte-i18n';
import en from './en.json';
import pt from './pt.json';

addMessages('en', en);
addMessages('pt', pt);

异步加载

推荐用于生产环境，按需加载语言资源，提升应用性能：

import { register } from 'svelte-i18n';

register('en', () => import('./en.json'));
register('pt', () => import('./pt.json'));

初始化配置

完成字典注册后，需要进行初始化配置：

import { register, init, getLocaleFromNavigator } from 'svelte-i18n';

register('en', () => import('./en.json'));
register('pt', () => import('./pt.json'));

init({
  fallbackLocale: 'en', // 设置回退语言
  initialLocale: getLocaleFromNavigator(), // 自动获取浏览器语言
});

注意事项

1. 初始化代码应放在应用入口文件中
2. 在 Sapper 项目中，服务端也需要调用 init()
3. 使用异步加载时，建议等待初始语言加载完成后再渲染应用

在组件中使用

在 Svelte 组件中，可以通过 $_ 快捷方法访问翻译文本：

<script>
  import { _ } from 'svelte-i18n';
</script>

<h1>{$_('page_title')}</h1>
<button>{$_('sign_in')}</button>

进阶功能

svelte-i18n 还支持以下高级特性：

1. 文本插值：在翻译文本中嵌入动态变量
2. 复数处理：根据数量显示不同文本形式
3. 日期/数字格式化：本地化显示格式
4. 嵌套消息：结构化组织翻译文本

最佳实践

1. 为每种语言维护独立的 JSON 文件
2. 生产环境使用异步加载优化性能
3. 设置合理的回退语言策略
4. 统一键名命名规范，便于维护
5. 考虑添加语言切换功能，提升用户体验

结语

svelte-i18n 为 Svelte 应用提供了简洁而强大的国际化支持。通过本文介绍的基础用法，开发者可以快速实现多语言功能。随着项目规模扩大，可以进一步探索其高级特性，构建更加完善的国际化解决方案。