面试题：Svelte组件国际化之中等难度：基础配置实现

Question

在Svelte项目中，假设我们要实现一个简单的国际化功能，展示“欢迎”这个词在不同语言中的表述。请描述如何使用i18next库进行基础配置，包括安装、初始化以及在Svelte组件中引入使用。

Answer 1

1. 安装：
   • 在Svelte项目根目录下，通过npm或yarn安装i18next和svelte - i18next。

   npm install i18next svelte - i18next
   # 或者
   yarn add i18next svelte - i18next
   

2. 初始化：
   • 在项目的入口文件（例如main.js）中，导入并初始化i18next。

   import i18n from 'i18next';
   import { initReactI18next } from'react - i18next';
   import Backend from 'i18next - http - backend';
   import LanguageDetector from 'i18next - browser - language - detector';
   
   i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
       fallbackLng: 'en',
       interpolation: {
         escapeValue: false
       }
     });
   

   • 这里使用了i18next - http - backend来从后端加载翻译文件，i18next - browser - language - detector来自动检测用户浏览器的语言设置，initReactI18next是i18next与React集成的插件（虽然是Svelte项目，但svelte - i18next基于此）。fallbackLng设置了默认语言为英语。
3. 在Svelte组件中引入使用：
   • 首先导入useTranslation函数。

   <script>
     import { useTranslation } from'svelte - i18next';
     const { t } = useTranslation();
   </script>
   
   <p>{t('welcome')}</p>
   

   • 这里通过useTranslation函数获取t函数，t函数用于根据当前语言环境翻译键值。假设在翻译文件中有welcome这个键对应不同语言的“欢迎”表述，就可以通过{t('welcome')}在组件中展示相应语言的文本。同时，需要确保翻译文件（例如en.json，zh - CN.json等）中包含welcome键及其对应的值，如下是en.json示例：

   {
     "welcome": "Welcome"
   }
   

   • 以及zh - CN.json示例：

   {
     "welcome": "欢迎"
   }