vue-i18n-cli

Vue I18n 开发辅助命令行工具，实现了语法转换、代码检测、翻译等功能，支持lint-staged

Feature

语法转换

1. 支持将文本和表达式进行组合转换，保证翻译质量

   例：字符串模板

   `最多填入${n}个字符` => $t('key', [n])

   例：vue模板

   <span>最多填入{{ n }}个字符</span>   => <span>{{ $t('key', [n]) }}</span> 

   例：JSX

   <span>最多填入{ n }个字符</span>   => <span>{ $t('key', [n]) }</span> 

2. 自动语法转换会过滤包含特殊字符的文案，避免引入错误，特殊字符包含：

   • 转译字符
   • 标签

检测与代码自动优化

1. 支持的检测内容包括：

   • 中文
   • 重复定义文案
   • 未使用文案
   • 引用不存在文案
   • 使用变量引用（辅助代码自动优化）

2. 代码自动优化

   优化内容包括删除重复定义文案和未使用文案。注意优化前提为：代码中不存在使用变量引用文案的方式，比如$t(keyName)。

文案翻译

仅支持在能翻墙的网络环境进行

文案导入、导出

1. 文案导入、导出仅支持tsv格式文件
2. 文案导出支持灵活配置导出模式：是否全量、是否仅导出未翻译、是否进行深导出

// CK csv导入飞书，修改后再导出cvs文件，导入

Quick-start

Installation

npm install yidun-i18n-cli

Init Project

1. 引入配置文件 vue-i18n-cli.config.js

module.exports = {
  // 项目路径
  project: "src",

  // i18n文件夹路径
  target: "src/i18n", 

  // 不需要过检的文件或文件夹,格式参照ignore包
  exclude: [],

  // 支持翻译的语言，填写参照：https://github.com/hua1995116/google-translate-open-api/blob/master/src/language.ts
  languages: ['en'],

  // webpack中的resolve配置，使用深导出时需要配置
  resolve: { // 参照 https://github.com/webpack/enhanced-resolve
    alias: {
      '@': './src' // i18n引用会优先采用alias配置
    }
  },
  detect: {
    // 检测优化时，是否进行自动翻译，默认关闭
    translate: false
  },
  translateKey: '' // google translate key，使用翻译功能时需要配置
}

2. 构建i18n目录，根据项目情况按照如下步骤执行

• 无需操作：目录结构满足如下

  注：语言对应json文件命名严格按照 languages枚举

  ├── i18n/
  |   ├── zh-cn.json
  |   ├── en.json

• 执行指令创建：之前未开始vue-i18n的项目

i18n-cli init

• 执行指令改造：指令同上，但需先将目录结构手动调整为如下，改造完后注意对依赖代码进行调整

  注：语言对应文件夹命名严格按照 languages枚举

  ├── i18n/
  |   ├── zh-cn/
  |   |   ├── common.json
  |   |   ├── server.json
  |   ├── en/
  |   |   ├── common.json
  |   |   ├── server.json

3. 导出VueI18n实例和$t方法

const i18n = new VueI18n({
  locale: 'cn',
  messages: {
    cn: {
      message: 'message'
    }
  }
})

export default i18n
// 快捷方法
export function $t (...rest) {
  return i18n.t(...rest)
}

Config lint-staged

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "i18n-cli transform",
      "git add */src/i18n/*.json"
    ]
  }

Instruction

i18n-cli init

构建i18n目录

i18n-cli detect [...files]

对文案和代码进行检测

支持配置项：

• -g (--globel) 全局检测
• -r (--relative) 文件路径为相对路径(基于project配置)
• -o (--optimize) 检测完后进行代码自动优化

例：

i18n-cli detect -g -o
i18n-cli detect -r src/test.js

i18n-cli transform [...files]

将代码中的中文转换成vue-i18n的语法

支持配置项：

• -g (--globel) 全局检测
• -r (--relative) 文件路径为相对路径(基于project配置)
• -t (--translate) 是否自动翻译所提取的文案

例：

i18n-cli transform -g -t
i18n-cli transform -r src/test.js

i18n-cli translate

对i18n目录下的文案进行翻译

i18n-cli export [...files]

导出文案，默认导出至./i18n-locale.tsv

支持配置项：

• -p (--path ) 导出文件的位置
• -r (--relative) 文件路径为相对路径(基于project配置)
• -t (--translate) 是否对导出文案进行翻译
• -g (--globel) 全量导出，global为false，仅导出指定文件相关的文案
• -d (--deep) 深度导出
• -u (--untran) 只导出未翻译文案

例：

i18n-cli export -g -u

i18n-cli import

导入文案，默认导入./i18n-locale.tsv

支持配置项：

• -p (--path ) 导入文件的位置

例：

i18n-cli import

Others

忽略指定代码不进行转换

1. 文件： vue-i18n-cli.config.js中配置exclude
2. 代码：使用注释实现行忽略、代码块忽略

// i18n-cli-disable-next-line

// i18n-cli-disable
// i18n-cli-enable