npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-i18n-auto-generate

v1.2.1

Published

vue 项目国际化全流程解决方案: 一个命令行工具,对代码里的中文文案一键完成提取、替换、翻译、导入、导出等,告别手动操作

Downloads

8

Readme

vue-i18n-auto-generate

一键完成整个项目中文文案的提取、替换、翻译、导入、导出

功能

  • 一键提取并替换中文文案
  • 导出未翻译的文案
  • 导入翻译好的文案

安装

npm install -g vue-i18n-auto-generate

使用

viag init
//  cli为`viag`提供了一个简单好记的别名`i18n`
i18n init

示例

  1. 在项目根目录(example/projectAfter)使用 viag init 命令初始化,生成配置文件(默认是 .vics 目录)
  2. 使用 viag one 命令一键提取替换(也可以分步使用 viag extractviag replace 命令)
  3. 使用 viag export en 导出未翻译的文件,就可以送翻了
  4. 使用 viag sync 暂时 mock 语料
  5. 使用 viag import en 翻译好的 xlsx 文件路径 导入翻译好的语料

效果

  • .vue 文件 vue
  • .js 文件 js

命令

"bin": {
    "viag": "src/index.js",
    "vue-i18n-auto-translate": "src/index.js",
    "i18n": "src/index.js"
  },

初始化项目,生成配置文件 vics-config.json

{
  // vics文件根目录,用于放置提取的langs文件
  vicsDir: './.vics',

  // 配置文件目录,若调整配置文件,此处可手动修改
  configFile: './.vics/vics-config.json',

  // 语言目录名,注意连线和下划线
  srcLang: 'zh-CN',
  distLangs: ['en-US'],
  langMap: {
    en_US: 'en_US',
    'en-US': 'en-US',
    en: 'en',
  },
  keyPrefix: '', // 如果设置了keyPrefix, 则生成的key为: `${keyPrefix}${index}`;否则通过百度翻译生成key
    // https://api.fanyi.baidu.com/doc/21, 通用翻译API接入文档
    baiduAppAPI: 'https://fanyi-api.baidu.com/api/trans/vip/translate',
    baiduAppid: '20200602000482988',
    baiduKey: 'CF5_meZdDAOtDzVkn2Nv',
  // I18N import 语句,请按照自己项目情况配置
  importI18N: "import I18N from '@/i18n';",
  // import 语句后缀,用于判断是否已经引入过
  i18nPath: '@/i18n',

  // 可跳过的文件夹名或者文加名,比如docs、mock等
  ignoreDir: [],
  ignoreFile: [],

  // 导出未翻译的文案,Excel 列的配置
  exportColConfig: ['export_path', '业务线', 'business_key', '描述(字典值)', '语料类型', '最长字符', '首字母大写', '语料说明图', 'translatable', 'formatted', 'zh_CN','en_US',],
  // 导出未翻译的文案,业务线、key、文案在 Excel 中列的索引
  exportColIndexMap: {
    businessLine: 1,
    key: 3,
    text: 10,
  },
  // 导入翻译好的文案,key、文案在 Excel 中列的索引
  importColIndexMap: {
    key: 4,
    text: 12,
  },
  // 语料平台 xlsx 文件配置,列从 0 开始
  checkColIndexMap: {
    key: 3, // key 所在列
    'zh-CN': 11, // 中文所在列
    en: 12, // 英文所在列
  },
  // 语料文件 prettier 配置
  prettierConfig: {},
}

viag one

一键提取并替换指定文件夹、指定层级(默认为 0)下的所有中文文案(包含子目录),可以指定语料文件(默认为指定文件夹名字)

viag one [dirPath] [level] [langFilename]

viag extract

提取指定文件夹、指定层级(默认为 0)下的所有中文文案(包含子目录),可以指定语料文件(默认为指定文件夹名字)

viag extract [dirPath] [level] [langFilename]

viag replace

替换指定文件夹、指定层级(默认为 0)下的所有中文文案(包含子目录),可以指定语料文件(默认为指定文件夹名字)

viag replace [dirPath] [level] [langFilename]

viag sync

同步各种语言的文案,使用百度翻译 mock 语料

viag sync

viag export

导出未翻译的文案

# 导出指定语言的中文文案,lang取值为配置中distLangs值(lang 参数必填),如 en 就是导出还未翻译成英文的中文文案。可以指定业务线和产物文件名
# 导出范围:range // 0 未翻译,2 全部
viag export [lang] [range] [businessLine] [outputFilename]

viag import

将翻译好的文案,导入到项目中

# 导入送翻后的文案
viag import [lang] [filePath]

viag moveRules

将 rules 从 data 移动到 computed,用来解决 rules 多语言不生效问题

# 将 rules 从 data 移动到 computed
viag moveRules [dir/file...]

viag check

比较翻译平台管理的语料、代码中使用的语料之间的差异

# 校验对比语料
viag check [filePath]

语料平台 xlsx 文件配置,列从 0 开始,编辑 vics-config.json checkColIndexMap 字段

  checkColIndexMap: {
    key: 3, // key 所在列
    'zh-CN': 11, // 中文所在列
    en: 12, // 英文所在列
  }

viag 解决了哪些问题

  • 解决 vue 项目国际化过程中,中文文案手动替换费时费力问题
  • 在翻译过程中,可以使用 viag 命令行自动提取未翻译中文词汇,导出成 Excel 方便与翻译同学协作。针对翻译同学还没有返回翻译文案的期间,可以使用 viag 的 sync 和 mock 功能,先临时翻译成对应语言,节省文案调整时间
  • 国际化文案翻译完成后,可以使用 viag 的 import 命令,一键导入到项目文件内
  • 比较翻译平台管理的语料、代码中使用的语料之间的差异,主要提供给测试同学使用

Authors

License

  • MIT