@svelte-dev/i18n 一个简单好用的 Svelte 国际化脚手架工具

官网： https://svelte.js.cool/i18n

安装

可以通过 npm, yarn, pnpm 或者 bun 进行安装：

npm add @svelte-dev/i18n

使用

创建 lib 声明：

import { browser } from '$app/environment';
import { navigating } from '$app/stores';
import { addMessages, locale } from '@svelte-dev/i18n';

const translations = import.meta.glob(`../i18n/*.ts`, { eager: true });

export const supportedLanguages = [];
export const fallbackLng = 'zh';

Object.entries(translations).forEach(([name, mod]) => {
  const lang = name.replace(/.+\/(.+)\.ts/, '$1');
  addMessages(lang, mod.dict);
  supportedLanguages.push(lang);
});

if (browser) {
  const path = new URL(location.href).pathname.split('/');
  const lang = supportedLanguages.includes(path?.[1]) ? path?.[1] : fallbackLng;
  locale.set(lang);

  navigating.subscribe((params) => {
    if (params?.to?.params?.lang) {
      locale.set(params.to?.params?.lang);
    }
  });
}

创建翻译文件，这里是一个示例：

// src/i18n/en.ts
import type { I18nDict } from '@svelte-dev/i18n';

export const dict: I18nDict = {
  __name: 'English',
  __flag: '🇺🇸',
  __unicode: '1f1fa-1f1f8',
  __code: 'EN',
  __direction: 'ltr',
  __status: 'beta',
  site: {
    title: 'Hello World'
  },
  common: {
    get_started: 'Get Started',
    npm_downloads: 'NPM Downloads'
  }
};

创建路由页面 [[lang]]/+page.svelte 或 [[lang=locale]]/+page.svelte。

可选，配置语言参数校验 src/params/locale.ts：

import type { ParamMatcher } from '@sveltejs/kit';
import { getLocales } from '@svelte-dev/i18n';

export const match: ParamMatcher = (param) => {
  return getLocales().includes(param);
};

配置 +layout.ts：

import '$lib/i8n';

在页面中使用：

<script>
  import { t } from '@svelte-dev/i18n';
</script>

{$t('message')}

TypeDocs

自动化生成的接口文档

赞助

维护者： Willin Wang

如果您对本项目感兴趣，可以通过以下方式支持我：

• 关注我的 Github 账号：@willin
• 参与 爱发电 计划
• 支付宝或微信扫码打赏

License

Apache-2.0