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

i18n-helper-cli

v0.1.8

Published

i18n 命令行工具。一键包裹,提取,翻译,统计。支持网页截图,翻译词条检测

Downloads

778

Readme

i18n-helper-cli

NPM npm node-current PRs Welcome

使用其他语言阅读:English | 简体中文

i18n-helper-cli 是什么

i18n-helper-cli 是一个 Web 国际化整体解决方案,包含自动包裹词条提取词条翻译词条词条翻译统计节省人力预估统计网页多语言显示异常检测(Coming soon)等功能。可以大大减低开发,测试,翻译各个角色的人力成本,减少重复劳动,低级错误。 i18n-helper-cli

为什么要用 i18n-helper-cli

Web 国际化流程

随着出海的业务越来越多,web 应用面临越来越多的国际化的工作。简单来说可以分为以下 5 个步骤

  1. 【选型】多语言框架选型(这里不深究,不在此篇范围),我们选定 i18next,18n-helper-cli 对多语言框架并不限制
  2. 【开发 - 包裹词条】从上面这步骤,我们知道需要把词条包裹起来,比如 t('你好')
  3. 【开发 - 提取词条】把上一步中包裹的词条 copy 到翻译文件中
  4. 【翻译 - 翻译】翻译把词条翻译好,填入翻译文件
  5. 【测试 - 测试页面】开发提交测试后,对多语言页面进行测试

问题

通过上面 5 步,可以完成站点国际化。大多数场景大家就是这么做的,但这里充斥着大量人工劳动,大量人工劳动意味着重复低效出错几率提高。让我们从以下三个阶段分析下这些问题

  • 【开发阶段】

    1. 人工操作包裹和提取词条耗时长,但对个人无任何成长。如果是【全新开发】的站点,大家还可以耐着性子包裹词条提取词条,但如果是【存量修改】及对已有的站点做国际化,而且这里的页面几十上百,甚至更多,这里的包裹词条提取词条的工作量会让人崩溃

    2. 遗漏包裹,提取词条

    3. 提取词条后,运行多语言界面无法看到效果,需要等到翻译返回

  • 【翻译阶段】

    1. 翻译耗时长
    2. 遗漏翻译
  • 【测试阶段】

    1. 多语言页面测试每个都要测,耗费大量时间
    2. 遗漏测试某个多语言页面

所以这里最大的问题是上面这些工作都需人工操作,问题清楚了,那接下来我们要做的就是把这些人工操作能够交给机器,实现自动化,提高效率降低出错几率

解决方案 & 原理

i18n-helper-cli 可以很好的解决上述问题。

  • 【词条包裹】通过对代码进行编译,得到AST,找到符合条件(中文,或者其他语言,可配置)的 Node,根据配置创建新 Node,替换老的 Node
  • 【词条提取】同上,也是AST, 找到的符合条件的词条以及原代码已经包裹的词条会被一起提取,根据配置写入文件
  • 【词条翻译】
    1. 从源文件翻译:如果有一份翻译词库(这里有常见的翻译),我们提取出来的未翻译词条在这里有,我们就可以直接从这里翻译
    2. 机器翻译:未翻译词条调用云服务实现翻译(这里我们用的是腾讯云的翻译服务)
  • 【网页多语言显示异常检测】提供一份页面 url 列表,用 Cypress 进行截图,调用腾讯云 OCR 服务提取图片文字,进行对比,假设我们有个叫你好的词条翻译成 en 为Hello,如果我们通过 OCR 得到的是Hel,那么我们可以认为这个页面有问题(Coming soon)
  • 【统计】
    1. 翻译词条统计:根据当前语言下未翻译词条数 / 词条总数
    2. 减低人工耗时预估:根据包裹,提取,翻译词条数预估

如何使用 i18n-helper-cli

实例

请参考 example

安装

请确保 Nodejs 版本大于 14

# npm 安装
npm install i18n-helper-cli -D
# yarn 安装
yarn add i18n-helper-cli —dev

快捷使用

  1. 在项目根目录下生成 i18n.config.json 文件
# 交互式命令行
i18n-helper init
# 生成默认配置文件,具体参见【配置说明】
i18n-helper init -y
  1. 包裹 & 提取 & 翻译 & 统计
# 包裹 & 提取 & 翻译 & 统计 i18n.config.json 中 srcPath 文件中的中文词条
i18n-helper scan -wetc
  1. 切换 Cli 语言
# cli 默认为中文,支持语言切换,目前支持zh & en
i18n-helper switch en

命令详情

# 包裹 & 提取 & 翻译 & 统计 i18n.config.json 中 srcPath 文件中的中文词条
# w:wrap e:extract t:translate tm: translate machine c:count
# l:language
# 这 5 个操作可以随意组合 e.g. i18n-helper scan -we 则只会翻译 & 提取
i18n-helper scan -wetc
i18n-helper scan -we -tm -c
# 包裹 & 提取 & 翻译 & 统计 指定路径,指定语言内符合规则的词条
# e.g i18n-helper scan -wetc -l en ./src/test/index.js
i18n-helper scan -wetc -l [language] [filepath]
i18n-helper scan -we -tm -c -l [language] [filepath]

# 包裹 i18n.config.json 中 srcPath 文件中的中文词条
i18n-helper wrap
i18n-helper scan -w
# 包裹指定文件中的中文词条
i18n-helper wrap [filepath]
i18n-helper scan -w [filepath]

# 提取 i18n.config.json 中 srcPath 文件中的中文词条到所有配置语言文件
i18n-helper extract
i18n-helper scan -e
# 提取指定文件中文词条到指定语言文件
# e.g i18n-helper extract -l en ./src/test/index.js
i18n-helper extract -l [language] [filepath]
i18n-helper scan -e -l [language] [filepath]

# 翻译 i18n.config.json 中配置翻译文件词条, -m 腾讯翻译君机器翻译
# 从翻译源文件文件中翻译
i18n-helper translate
i18n-helper scan -t
# 腾讯翻译君自动翻译
i18n-helper translate -m
i18n-helper scan -tm
# 翻译指定语言
# 从翻译源文件文件中翻译
i18n-helper translate [language]
i18n-helper scan -t -l [language]
# 腾讯翻译君自动翻译指定语言文件
i18n-helper translate -m [language]
i18n-helper scan -tm -l [language]

# 统计 i18n.config.json 中翻译文件的翻译情况
i18n-helper count
i18n-helper scan -c
# 统计指定语言翻译文件的翻译情况,多个语言用,分隔
i18n-helper count [language]
i18n-helper scan -c -l [language]

配置详情

module.exports = {
  // cli 语言
  cliLang: 'zh',
  // 项目类型:react | vue | js
  projectType: '[react]',
  // 默认包裹和提取词条的目录
  srcPath: './',
  // 扫描文件格式
  fileExt: 'js,jsx,ts,tsx',
  // git模式,设置为 true, 则只扫描修改和新增文件
  gitModel: false,
  // 包裹的字符集,下面是中文
  wrapCharacter: '[\u4e00-\u9fa5]',
  // 包裹词条的名字
  wrapperFuncName: 't',
  // 忽略掉包裹的方法,多个用,分隔,模糊匹配,支持正则,不区分大小写 e.g ^console
  excludeWrapperFuncName: 'console,split,indexOf',
  // jsx中的文字包裹方式,true用<trans></trans>, false用【wrapperFuncName】的value包裹
  jsx2Trans: false,
  // 当文件需要翻译时引入的文件
  importStr: `import { Trans, useTranslation, Translation, withTranslation } from 'react-i18next';\n`,
  // 排除目录,此目录下的不会不会执行包裹和提取词条操作
  exclude: 'node_modules,dist,.git',
  // 格式化方式,支持Prettier和ESlint,请确保项目根目录下有对应的配置文件,具体参考Prettier和ESlint官网
  format: 'Prettier',
  // 翻译词条目录
  localeDir: './locales',
  // 翻译语种
  languages: 'zh,en',
  // 源语言
  sourceLanguage: 'zh',
  // 翻译词条文件名
  transFileName: 'translation',
  // 翻译词条文件格式: json, po
  transFileExt: 'json',
  // 翻译词库目录(自动翻译目录)
  targetTransDir: './src/translations',
  // 翻译词库文件名
  targetTransFile: 'transLib.json',
  // 腾讯云 secretId
  secretId: '',
  // 腾讯云 secretKey
  secretKey: '',
};

未来规划

  • [ ] 网页多语言显示异常检测
  • [ ] 丰富提取文件(po, csv, excel 等等)
  • [ ] 词条提取 cleanMode,目前如果代码中没有这个词条了,提取后的文件依然会有

其他

目前还在完善中,欢迎大家试用,大家有问题可以提 issue。

如果您觉得这个工具能帮到解决日常工作的问题,确实提升了效率,请扫下面的二维码,谢谢。