使用Intlayer在Create React App中实现国际化(i18n)开发指南

2025-06-12 07:48:09作者：董斯意

什么是Intlayer？

Intlayer是一款专为现代Web应用设计的国际化(i18n)解决方案，它通过创新的组件级内容管理方式，简化了多语言支持开发的复杂度。与传统的国际化库不同，Intlayer提供了更直观、类型安全的开发体验。

核心优势

声明式内容管理：直接在组件旁定义多语言内容，保持代码组织结构清晰
TypeScript深度集成：自动生成类型定义，提供完善的代码提示和类型检查
动态语言切换：支持运行时无缝切换语言，无需刷新页面
路由国际化：可配置的URL前缀方案，优化SEO和多语言站点结构

环境准备

确保已安装以下环境：

Node.js 16+
npm/yarn/pnpm
Create React App项目

安装与配置

第一步：安装依赖

根据您使用的包管理器选择相应命令：

# npm
npm install intlayer react-intlayer react-scripts-intlayer

# yarn
yarn add intlayer react-intlayer react-scripts-intlayer

# pnpm
pnpm add intlayer react-intlayer react-scripts-intlayer

第二步：项目配置

创建intlayer.config.ts配置文件：

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.CHINESE, Locales.JAPANESE],
    defaultLocale: Locales.CHINESE,
  },
  content: {
    contentDir: "./src/locales",
  }
};

export default config;

关键配置项说明：

locales: 支持的语言列表
defaultLocale: 默认语言
contentDir: 多语言文件存放目录

第三步：修改项目脚本

更新package.json中的脚本：

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

内容管理实践

创建多语言内容

在配置的contentDir目录下创建内容文件：

// src/locales/home.content.ts
import { t } from "intlayer";

export default {
  key: "home",
  content: {
    title: t({
      en: "Welcome",
      zh: "欢迎",
      ja: "ようこそ"
    }),
    description: t({
      en: "This is a demo application",
      zh: "这是一个演示应用",
      ja: "これはデモアプリケーションです"
    })
  }
};

在组件中使用

import { useIntlayer } from "react-intlayer";

function HomePage() {
  const content = useIntlayer("home");
  
  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
}

高级功能实现

动态语言切换

import { useLocale } from "react-intlayer";

function LanguageSwitcher() {
  const { locale, setLocale } = useLocale();
  
  return (
    <select 
      value={locale}
      onChange={(e) => setLocale(e.target.value)}
    >
      <option value="en">English</option>
      <option value="zh">中文</option>
      <option value="ja">日本語</option>
    </select>
  );
}

国际化路由配置

结合React Router实现：

import { LocaleRouter } from "./LocaleRouter";
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <LocaleRouter>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </LocaleRouter>
    </BrowserRouter>
  );
}