使用Intlayer在Create React App项目中实现国际化开发

2025-06-12 01:51:33作者：沈韬淼Beryl

前言

在现代Web应用开发中，国际化(i18n)已成为必不可少的功能。Intlayer作为一个创新的国际化解决方案，为React应用提供了简单高效的国际化支持。本文将详细介绍如何在Create React App项目中使用Intlayer实现国际化功能。

Intlayer核心优势

Intlayer相比传统国际化方案具有以下显著优势：

组件级声明式字典：可以直接在组件中定义多语言内容，保持代码高内聚
TypeScript原生支持：自动生成类型定义，提供完善的类型检查和代码提示
动态语言切换：支持运行时动态切换语言，无需刷新页面
路由国际化：可轻松实现多语言URL路由
开发体验优化：提供CLI工具和Webpack插件，简化开发流程

环境准备

安装依赖

首先需要安装Intlayer相关依赖包：

npm install intlayer react-intlayer react-scripts-intlayer

或使用yarn/pnpm：

yarn add intlayer react-intlayer react-scripts-intlayer
# 或
pnpm add intlayer react-intlayer react-scripts-intlayer

各包功能说明：

intlayer：核心包，提供国际化基础功能
react-intlayer：React集成包，提供React组件和Hook
react-scripts-intlayer：Create React App适配包

项目配置

基础配置

在项目根目录创建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;

配置项说明：

locales：支持的语言列表
defaultLocale：默认语言
还可配置中间件、内容目录等高级选项

修改项目脚本

更新package.json中的scripts：

{
  "scripts": {
    "start": "react-scripts-intlayer start",
    "build": "react-scripts-intlayer build",
    "transpile": "intlayer build"
  }
}

内容管理

创建内容字典

在src目录下创建.content.tsx文件定义多语言内容：

import { t, type Dictionary } from "intlayer";
import React from "react";

const appContent = {
  key: "app",
  content: {
    welcome: t({
      en: "Welcome to our app",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación"
    }),
    buttonText: t({
      en: "Click me",
      fr: "Cliquez ici",
      es: "Haz clic aquí"
    })
  }
} satisfies Dictionary;

export default appContent;

内容字典特点：

使用t()函数包裹多语言文本
支持JSX内容
结构化组织，便于维护

应用集成

基础使用

在React组件中使用国际化内容：

import { IntlayerProvider, useIntlayer } from "react-intlayer";

function App() {
  const content = useIntlayer("app");
  
  return (
    <IntlayerProvider>
      <h1>{content.welcome}</h1>
      <button>{content.buttonText}</button>
    </IntlayerProvider>
  );
}

动态语言切换

实现语言切换功能：

import { useLocale } from "react-intlayer";

function LanguageSwitcher() {
  const { locale, setLocale } = useLocale();
  
  return (
    <div>
      <button onClick={() => setLocale("en")}>English</button>
      <button onClick={() => setLocale("fr")}>Français</button>
      <button onClick={() => setLocale("es")}>Español</button>
    </div>
  );
}

高级功能

国际化路由

结合React Router实现多语言路由：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Locales } from "intlayer";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/en/*" element={<Home locale={Locales.ENGLISH} />} />
        <Route path="/fr/*" element={<Home locale={Locales.FRENCH} />} />
        <Route path="/es/*" element={<Home locale={Locales.SPANISH} />} />
        <Route path="/*" element={<Home locale={Locales.ENGLISH} />} />
      </Routes>
    </BrowserRouter>
  );
}