前端实现多语言国际化

前端实现多语言国际化

1. 定义多语言文本对象

首先，我们可以定义一个包含多种语言的文本对象。例如，支持中文和英文：

const texts = {
  en: {
    TEXT_0: "Hello, World!",
    TEXT_1: "Welcome to our application.",
  },
  zh: {
    TEXT_0: "你好，世界！",
    TEXT_1: "欢迎使用我们的应用。",
  },
  // 可以继续添加其他语言
};

2. 实现多语言 msg 函数

接下来，我们实现一个 msg 函数，该函数接受一个键和一个语言代码作为参数，并返回对应语言的字符串：

function msg(key, lang) {
  if (texts[lang] && texts[lang][key]) {
    return texts[lang][key];
  } else {
    return `未找到键为 ${key} 的文本`;
  }
}

3. 处理文件内容

在处理文件内容时，我们仍然使用正则表达式提取中文字符串，并将其替换为 msg 函数调用。不过，这次我们需要在运行时指定语言：

const fs = require('fs-extra');
const path = require('path');

// 正则表达式匹配连续的中文字符串
const chineseRegex = /[\u4e00-\u9fa5]+/g;

// 模拟的文件内容
const fileContent = `
  <h1>你好，世界！</h1>
  <p>欢迎使用我们的应用。</p>
`;

// 处理文件内容，提取中文字符串并替换
function processContent(content) {
  let match;
  while ((match = chineseRegex.exec(content)) !== null) {
    const key = `TEXT_${Object.keys(texts.zh).length}`;
    texts.zh[key] = match[0];
    content = content.replace(match[0], `msg("${key}", "zh")`);
  }
  return content;
}

// 处理文件内容
const processedContent = processContent(fileContent);

// 输出处理后的内容
console.log(processedContent);

// 输出中文字符串对象
console.log(texts);

4. 使用多语言 msg 函数

在实际应用中，你可以根据用户的语言偏好来调用 msg 函数。例如，如果用户选择了英文：

console.log(msg("TEXT_0", "en")); // 输出: Hello, World!
console.log(msg("TEXT_1", "en")); // 输出: Welcome to our application.

5. 动态选择语言

在实际应用中，你可能需要根据用户的语言设置动态选择语言。例如，你可以从用户配置或浏览器设置中获取语言代码，并将其传递给 msg 函数。

附：提取现存项目中的中文并替换为msg函数消费

const fs = require('fs-extra');
const path = require('path');

// 正则表达式匹配连续的中文字符串
const chineseRegex = /[\u4e00-\u9fa5]+/g;

// 存储中文字符串和对应的key
const chineseTexts = {};

// 递归遍历目录
function walkDir(dir) {
  return fs
    .readdir(dir, { withFileTypes: true })
    .then((files) =>
      Promise.all(
        files.map((file) => {
          if (file.isDirectory()) {
            return walkDir(path.join(dir, file.name));
          } else {
            return processFile(path.join(dir, file.name));
          }
        })
      )
    )
    .then((contents) => {
      contents = contents.flat(); // 处理嵌套数组
      return contents;
    });
}

// 处理文件，提取中文字符串
function processFile(filepath) {
  return fs.readFile(filepath, 'utf8').then((content) => {
    let match;
    while ((match = chineseRegex.exec(content)) !== null) {
      console.log(match);
      const key = `TEXT_${chineseTexts.size || 0}`;
      chineseTexts[key] = match[0];
      content = content.replace(match[0], `msg("${key}")`);
    }
    return fs.outputFile(filepath, content);
  });
}

// 保存中文字符串到JavaScript文件
function saveChineseTexts() {
  const textsFileContent = `const chineseTexts = ${JSON.stringify(chineseTexts, null, 2)};\nexport default chineseTexts;`;
  return fs.outputFile('chinese_texts.js', textsFileContent);
}

// 指定要扫描的目录
const directoryToScan = './src/i18nTest';

// 扫描目录并处理每个文件
walkDir(directoryToScan)
  .then(() => {
    saveChineseTexts()
      .then(() => {
        console.log('Chinese texts extracted and files updated successfully.');
      })
      .catch((err) => console.error('Error saving texts file:', err));
  })
  .catch((err) => console.error('Error walking directory:', err));

待优化

考虑在react或vue项目中扫描现有的中文文本并替换为msg函数消费的方式，还需要进行哪些优化

1. 使用国际化库

使用成熟的国际化库如 react-i18next 或 react-intl

2. 多语言资源管理

资源文件管理：将不同语言的翻译文本存储在不同的 JSON 文件中，并在项目中进行加载和切换

3. 性能优化

• 按需加载：对于大型项目，可以使用按需加载的方式，只加载当前所需的语言资源，减少初始加载时间。
• 缓存翻译文本：在内存中缓存翻译文本，避免重复加载和解析.