半自动化进行国际化翻译 —— node.js + i18n插件

一、nodejs代码

执行以下代码后，会自动替换大部分文字

const axios = require("axios");
const fs = require('fs')
const { readdir } = require('fs/promises')
const path = require('path')
const { pinyin } = require('pinyin-pro');

// 判断是不是中文 \u4e00-\u9fa5
// () 为了提取匹配字符串的，表达式中有几个()就有几个相应的匹配字符串 $1
// [] 定义匹配的字符范围。比如[a-zA-Z0-9]表示匹配英文字符和数字。[\s*表示空格或者*号]
// + 一次或多次   * 零次或多次   ? 零次或一次
//  (1)''   (2)""   (3) > <    (4) =''   (5) =""  (6)``
//   /'([\u4e00-\u9fa5]+)'/g  
//   /'([\u4e00-\u9fa5][\u4e00-\u9fa5a-zA-Z0-9?？!！%，:：()...]*)'/g
const reg1 = /'([\u4e00-\u9fa5][\u4e00-\u9fa5a-zA-Z0-9?？!！%，:：()...]*)'/g
const reg2 = /"([\u4e00-\u9fa5][\u4e00-\u9fa5a-zA-Z0-9?？!！%，:：()...]*)"/g
const reg3 = />\s*([\u4e00-\u9fa5][\u4e00-\u9fa5a-zA-Z0-9?？!！%，:：()...]*)\s*</g
const reg4 = /=\s*'([\u4e00-\u9fa5][\u4e00-\u9fa5a-zA-Z0-9?？!！%，:：()...]*)'/g
const reg5 = /=\s*"([\u4e00-\u9fa5][\u4e00-\u9fa5a-zA-Z0-9?？!！%，:：()...]*)"/g
const reg6 = /`([\u4e00-\u9fa5][\u4e00-\u9fa5a-zA-Z0-9?？!！%，:：()...]*)`/g

const list = new Set()
const unique = []
const map = {}
const fileList = []

function create(file) {
  const arr = file.split('\\').slice(6)
  return arr.join('-').split('.')[0].replace(/\-/g, '.')
}

async function translateToID(value) {
  const str = encodeURI(value);
  // 有道翻译api  发送请求 (接口不可用时,请自主替换)
  const res = await axios.get('http://fanyi.youdao.com/translate?&doctype=json&type=AUTO&i=' + str)
  let resID = res.data.translateResult[0][0].tgt
  // 预处理 转ID 驼峰命名
  if (resID.indexOf(" ") != -1) {  // 翻译结果为多个单词
    resID = resID.split(' ')
    // 去除翻译中的(),'  为了省事，直接筛掉含这些的单词
    resID = resID.filter( v => !(v.includes("(") || v.includes(")") ||  v.includes("'") ||  v.includes(","))  )
    // 翻译结果 英文太长 进行裁剪
    if (resID.length > 5) {
      resID = resID.filter(v => {
        return v.length > 5
      })
    }
    resID = resID.map((v, k) => {
      // 驼峰命名
      if (k == 0) return v.toLowerCase()
      return v.charAt(0).toUpperCase() + v.slice(1)
    }).join('')
  }
  return resID
}

async function sleep(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve()
    }, time)
  })
}

const exec = async (reg, str, file) => {
  let res;
  // 反复调用 exec() 方法来遍历字符串中的所有匹配文本
  do {
    res = reg.exec(str);
    if (res && res[1]) {
      const f = create(file)
      if (!unique.includes(res[1])) {

        // 用英文来作为umi国际化占坑id  intl.formatMessage({id:'XXX'})  缺点：翻译速度慢
        // let resID = await translateToID(res[1])
        // await sleep(500)

        // 用拼音来作为umi国际化占坑id 
        let resID = pinyin(res[1],{ toneType: 'none', type: 'array' }).join('');

        unique.push(res[1])
        list.add(`${res[1]}.${f}`)
        map[`${f}.${resID}`] = res[1]
      }
    }
  } while (res)
}

async function readFile(filePath) {
  try {
    // 返回一个Stats对象，其中包含文件路径的详细信息
    const stats = fs.statSync(filePath)
    // 判断是否为文件 true false
    const isFile = stats.isFile();
    // 判断是否为目录 true false
    const isDir = stats.isDirectory();
    if (isFile) {
      fileList.push(filePath)
    }
    if (isDir) {
      await myReaddir(filePath)
    }
  } catch (err) {
    console.log(err)
  }
}

async function readFiles(dir, files, index = 0) {
  if (index < files.length) {
    const filePath = path.join(dir, files[index])
    await readFile(filePath)
    await readFiles(dir, files, index + 1)
  }
}

async function myReaddir(dir) {
  try {
    // fsPromises.readdir 读取目录内容 返回目录中文件的名称数组（不包括 '.' 和 '..'）
    const files = await readdir(dir)
    await readFiles(dir, files)
  } catch (err) {
    console.log(err)
  }
}

async function generateMap(file) {
  try {
    // 读文件
    const data = fs.readFileSync(file).toString()
    await exec(reg1, data, file)
    await exec(reg2, data, file)
    await exec(reg3, data, file)
    await exec(reg4, data, file)
    await exec(reg5, data, file)
    await exec(reg6, data, file)
  } catch (err) {
    console.log(err)
  }
}

async function generate(index = 0) {
  if (index < fileList.length) {
    await generateMap(fileList[index])
    await generate(index + 1)
  }
}

async function transfer() {
  const o = require('./map')

  const map = Object.keys(o).reduce((obj, key) => {
    obj[o[key]] = key
    return obj
  }, {})

  const fileList = require('./fileList')

  fileList.forEach(async file => {
    let flag = false;
    try {
      const res = fs.readFileSync(file)
      const data = "import { useIntl } from 'umi';\r\n" + res.toString()
      // const data = res.toString()
      
      // 注意匹配的顺序  
      let tData = data.replace(reg4, function (match, $1) {
        flag = true;
        return `={intl.formatMessage({ id: '${map[$1]}' })}`
      })

      tData = tData.replace(reg5, function (match, $1) {
        flag = true;
        return `={intl.formatMessage({ id: '${map[$1]}'})}`
      })

      tData = tData.replace(reg1, function (match, $1) {
        flag = true;
        return "`${intl.formatMessage({ id: '" + map[$1] + "'})}`"
      })
      tData = tData.replace(reg6, function (match, $1) {
        flag = true;
        return "`${intl.formatMessage({ id: '" + map[$1] + "'})}`"
      })
      tData = tData.replace(reg2, function (match, $1) {
        flag = true;
        return "`${intl.formatMessage({ id: '" + map[$1] + "'})}`"
      })
      tData = tData.replace(reg3, function (match, $1) {
        flag = true;
        return ">{ intl.formatMessage({ id: '" + map[$1] + "'}) }<"
      })

      if(flag) {
        tData = "import { useIntl } from 'umi';\r\n" + tData
        fs.writeFileSync(file, tData)
      }
    } catch (err) {
      console.log(err)
    }
  })
}

async function tarverse() {
  await myReaddir(path.join(__dirname, './src/pages'))
  // await myReaddir(path.join(__dirname, './src/pages/member/memberEvaluate'))

  await generate()

  fs.writeFileSync(path.join(__dirname, './list.js'), JSON.stringify(Array.from(list), null, 2))
  fs.writeFileSync(path.join(__dirname, './map.js'), JSON.stringify(map, null, 2))
  // string.endsWith('XXX')  是否以XXX结尾
  fs.writeFileSync(path.join(__dirname, './fileList.js'), JSON.stringify(fileList.filter(file => file.endsWith('tsx') || file.endsWith('ts')), null, 2))
}

// 先执行第一个方法，生成三个文件夹
tarverse()
// 再执行第二个方法，进行umi国际化 intl.formatMessage({id:'resID'}) 替换
// transfer()

使用指南：

1. 代码第203行 await myReaddir(path.join(__dirname, ‘./src/pages’))
2. 终端输入 node reader.js
3. 执行tarverse()方法，生成三个文件
4. 在map.js 和 fileList.js 中加上 module.exports =
5. 注释代码215行，使用代码217行 终端输入 node reader.js 执行transfer() 方法
   a. 第一行 import {useIntl} from ‘umi’; 若不是函数组件 要修改成自己需要的
   b. 在文件相应的位置声明intl => const intl = useIntl();

二、半自动化插件

以上代码执行完后，还有少部分遗漏的(利用正则表达难以匹配)，需要自己手动翻译，这时候借助这个插件会方便很多

链接: https://pan.baidu.com/s/1Ebrd2GCm0cz6ONmYQI5TbQ 提取码: ju97 复制这段内容后打开百度网盘手机App，操作更方便哦

使用说明：

1. 在vscode中导入插件
   
   
2. 进行相应的配置
   主要配置以下三个，其他三个有需求的话也可以进行配置
   
3. 使用：选择要翻译的文字，右键“提取国际化文案”即可，在 src/locales/zh-CN/components 文件夹中就会自动添加相应的键值对（路径和文件名是通过步骤2配置的）
   

三、知识补充 —— umi国际化

1、config.ts配置开启umi国际化

具体参考官网

export default defineConfig({
    ...,
    locale: {
        default: 'zh-CN',
        antd: false,
        title: false,
        baseNavigator: true,
        baseSeparator: '-',
  }
})

2、国际化文件配置

在src下创建locales文件，如果项目配置了 singular: true ，locales 要改成 locale
在locales文件下新建zh-CN.ts、en-US.ts文件，并且在文件中做配置

// zh-CN.ts文件
export default{
    'project.package.login.hello':'你好！'
}

// en-US.ts文件
export default{
    'project.package.login.hello':'Hello Work!'
}

3、在函数组件中使用国际化-useIntl

import {useIntl} from 'umi';

const FunctionComponents = (props:any)=>{
    const intl = useIntl();
    
    return (
        <>
        {intl.formatMessage({id:'project.package.login.hello'})}
        </>
    )
    
}

export default FunctionComponents

4、在类组件中使用国际化-injectIntl

import {injectIntl} from 'umi';

class FunctionComponents{
    return (
        <>
        
        </>
    )
}

export default injectInit(FunctionComponents)

5、在ts文件中使用国际化-getIntl

import {getIntl} from 'umi';
const intl = getIntl();

export const DataException = {
    hello: intl.formatMessage({id:'project.package.login.hello'})
} 

六、动态设置国际化setLocale、getLocale

setLocale 设置切换语言，默认会刷新页面，可以通过设置第二个参数为 false ，来实现无刷新动态切换。
getLocale 将获得当前选择的语言。

// 刷新页面
setLocale('zh-CN', true);

// 不刷新页面
setLocale('zh-CN', false);
console.log(getLocale()); // zh-CN