前端快速国际化方案

再说次晚安
255 阅读5分钟

vue3+vite 只需两天就能快速把成熟的系统完成国际化

这几天公司需要把一个系统，做国际化，但是呢，国际化从0到1好做，但是呢都已经到n了，这就不好做了。因为做国际化有几个痛点，需要把项目内的中文全都查询出来，然后全部翻译一遍。 这里推荐给大家一个插件一款能够自动将代码里的中文转成 i18n 国际化标记的命令行工具。当然，你也可以用它实现将中文语言包自动翻译成其他语言。适用于 vue2、vue3 和 react

文档地址：github.com/IFreeOvO/i1…

先说说使用这个插件遇到的几个坑，并且我是怎么解决的

1、首先是导入在script标签的i18n包，有一些是需要手动再去导入一下的，可能是项目太大了没跑完

2、翻译的话这个插件推荐了几种翻译渠道，我用的百度翻译，但是呢，如果你需要翻译的字段态度了，他就只能跑前面三四百个单词。后面一些就跑不动了，这种是需要自己再去写个脚本去调用百度翻译的api去替换一下就好了

百度翻译开发平台：fanyi-api.baidu.com/

直接注册个人开发者就行，他的免费翻译容量还是很多的

安装

npm i @ifreeovo/i18n-extract-cli -g

使用

在项目根目录执行下面命令

it

指令参数

参数类型默认值描述
-i, --inputString'src'指定待提取的文件目录。
-o, --outputString''输出转换后文件路径。没有值时表示完成提取后自动覆盖原始文件。当有值时，会输出到指定目录
-c, --config-fileString''指定命令行配置文件的所在路径（可以自定义更多功能）
--localePathString'./locales/zh-CN.json'指定提取的中文语言包所存放的路径。
-v,--verboseBooleanfalse控制台打印更多调试信息
-h,--helpBooleanfalse查看指令用法
--skip-extractBooleanfalse跳过 i18n 转换阶段。
--skip-translateBooleanfalse跳过中文翻译阶段。
--localesArray['en-US']根据中文语言包自动翻译成其他语言。用法例子 --locales en zh-CHT
--incrementalBooleanfalse开启后。支持将文件中提取到中文键值对，追加到原有的中文语言包。
--exportExcelBooleanfalse开启后。导出所有翻译内容到 excel。 默认导出到当前目录下的 locales.xlsx
--excelPathString'./locales.xlsx'指定导出的 excel 路径。

子命令

子命令描述
init在项目里初始化一个命令行配置
loadExcel根据导入翻译文件的 excel 内容，生成语言包

命令行配置

如果有更多的定制需求，可以在项目根目录执行it init，创建i18n.config.js文件，按自身需求修改完配置后，再执行it -c i18n.config.js。（注意：配置文件里参数的优先级比指令参数高）

// 以下为i18n.config.js默认的完整配置，所有属性均为可选，可以根据自身需要修改
module.exports = {
  input: 'src',
  output: '', // 没有值时表示完成提取后自动覆盖原始文件
  exclude: ['**/node_modules/**/*'], // 排除不需要提取的文件
  localePath: './locales/zh-CN.json', // 中文语言包的存放位置
  localeFileType: 'json', // 设置语言包的文件类型，支持js、json。默认为json
  // rules每个属性对应的是不同后缀文件的处理方式
  rules: {
    js: {
      caller: '', // 自定义this.$t('xxx')中的this。不填则默认没有调用对象
      functionName: 't', // 自定义this.$t('xxx')中的$t
      customizeKey: function (key, currentFilePath) {
        return key
      }, // 自定义this.$t('xxx')中的'xxx'部分的生成规则
      importDeclaration: 'import { t } from "i18n"', // 默认在文件里导入i18n包。不填则默认不导入i18n的包。由于i18n的npm包有很多，用户可根据项目自行修改导入语法
      forceImport: false, // 即使文件没出现中文，也强行插入importDeclaration定义的语句
    },
    // ts,cjs,mjs,jsx,tsx配置方式同上
    ts: {
      caller: '',
      functionName: 't',
      customizeKey: function (key, currentFilePath) {
        return key
      },
      importDeclaration: 'import { t } from "i18n"',
      forceImport: false,
    },
    cjs: {
      caller: '',
      functionName: 't',
      customizeKey: function (key, currentFilePath) {
        return key
      },
      importDeclaration: 'import { t } from "i18n"',
      forceImport: false,
    },
    mjs: {
      caller: '',
      functionName: 't',
      customizeKey: function (key, currentFilePath) {
        return key
      },
      importDeclaration: 'import { t } from "i18n"',
      forceImport: false,
    },
    jsx: {
      caller: '',
      functionName: 't',
      customizeKey: function (key, currentFilePath) {
        return key
      },
      importDeclaration: 'import { t } from "i18n"',
      functionSnippets: '', // react函数组件里，全局加代码片段
      forceImport: false,
    },
    tsx: {
      caller: '',
      functionName: 't',
      customizeKey: function (key, currentFilePath) {
        return key
      },
      importDeclaration: 'import { t } from "i18n"',
      functionSnippets: '',
      forceImport: false,
    },
    vue: {
      caller: 'this',
      functionNameInTemplate: '$t',// vue这里的配置，仅针对vue的template标签里面的内容生效
      functionNameInScript: '$t', // vue这里的配置，仅针对vue的script部分export default里面的内容生效
      customizeKey: : function (key, currentFilePath) {
        return key
      },
      importDeclaration: '',
      forceImport: false,
      tagOrder: ['template', 'script', 'style'], // 支持自定义vue文件的标签顺序
    },
  },
  globalRule: {
    ignoreMethods: [] // 忽略指定函数调用的中文提取。例如想忽略sensor.track('中文')的提取。这里就写['sensor.track']
  },
  // prettier配置，参考https://prettier.io/docs/en/options.html
  prettier: {
    semi: false,
    singleQuote: true,
  },
  skipExtract: false, // 跳过提取中文阶段
  // 以下是和翻译相关的配置，注意搭配使用
  skipTranslate: true, // 跳过翻译语言包阶段。默认不翻译
  locales: [], // 需要翻译的语言包。例如['en', 'zh-CHT']，会自动翻译英文和繁体
  excelPath: './locales.xlsx', // excel存放路径
  exportExcel: false, // 是否导出excel
  // 参数：
  // allKeyValue：已遍历的所有文件的key-value
  // currentFileKeyMap: 当前文件提取到的key-value
  // currentFilePath: 当前遍历的文件路径
  adjustKeyMap(allKeyValue, currentFileKeyMap, currentFilePath) {return allKeyValue}, // 对提取结构进行二次处理
}

总之呢这个插件还是节约了我非常多的时间的，推荐给大家

avatar
文章
阅读
粉丝