讲师中心 微信公众号
AI工具推荐 视频效率加速

Translation 组件提取模板词条实现众包翻译流程【国际化】

老涛大大_1769

老涛大大_1769

发布时间:2026-07-11 18:43:26

|

371人浏览过

|

来源于php中文网

原创

真正能落地的做法是在运行时劫持i18n函数调用记录key,如重写i18next的t函数或监听react-intl的formatMessage,在开发环境采集真实执行路径的key列表,导出为含key、sourceText、filePath、lineNumber的标准JSON,并适配Crowdin/Lokalise格式要求。

translation 组件提取模板词条实现众包翻译流程【国际化】

提取 React 组件中待翻译文案的常见错误

直接用正则扫 jsx 文件提取字符串,大概率漏掉动态拼接、条件渲染、JSX 元素嵌套里的文案,比如 {isLogin ? '登录' : '退出'} 或 <span>{t('welcome')}</span> 里的 t 调用。更麻烦的是,有些文案藏在 props、hooks 返回值或第三方 UI 库组件属性里(如 Antd Button 的 children),静态分析根本抓不到。

真正能落地的做法是:在运行时劫持 i18n 函数调用,把每次传入的 key 记录下来。比如用 i18next 时,重写 t 函数,在开发环境把所有调用过的 key 推进一个全局数组;用 react-intl 就监听 FormattedMessage 渲染或 useIntl().formatMessage 调用。这样拿到的是真实执行路径上的 key 列表,不依赖 AST 解析精度。

  • 别碰 babel-plugin-i18n-extract 这类插件——它们对自定义 hook、高阶组件、TS 类型泛型支持极差,且无法捕获运行时生成的 key
  • 确保只在 process.env.NODE_ENV === 'development' 下启用采集逻辑,避免影响生产构建体积和性能
  • 采集后导出为标准 json 格式,字段必须含 key、sourceText(原文)、filePath、lineNumber,方便后续定位和审核

生成可导入 Crowdin / Lokalise 的标准格式

众包平台不认你本地随便写的 zh.json 或 en.yml,它们要求明确的 source language + target language + context 字段。Crowdin 接收的最小可用单位是 .xliff 或带 _meta 的 json,Lokalise 支持 json 但强制要求顶层为对象,且每个 key 的 value 必须是字符串(不能是 null 或 {})。

最稳妥的转换方式是:用采集到的原始数据,生成符合 Crowdin API v2 文件上传规范 的结构,即每个条目包含 data(原文)、identifier(key)、context(来自 filePath 和 lineNumber 拼接)、comments(可选,比如开发者备注的复数规则说明)。

Symfony Linux版
Symfony Linux版

Symfony Linux版整理 Symfony CLI 5.17.1 官方下载入口和 Symfony 框架安装配置说明。

下载
  • 避免用 JSON.stringify 直接输出——要手动处理换行符、引号转义,否则 Crowdin 导入会报 Invalid JSON structure
  • 如果文案含变量占位符(如 "Hello {name}"),必须在 context 或 comments 中注明,否则译员可能误翻成 "你好 {姓名}"
  • 同一 key 在多个文件出现?保留第一个位置,其余在 comments 中追加 also used in: xxx.tsx:42

让译员不改代码也能提交翻译结果

译员不会装 Node、跑 npm run extract,他们只打开网页填表单。所以必须把「提取 → 上传 → 下载 → 合并」流程封装成一键脚本,并提供清晰的 README.md 链接。关键不是自动化程度多高,而是失败时有明确提示——比如下载的 zh.json 缺少某个 key,脚本应报错 Missing translation for "button.submit": found in source but not in Crowdin response,而不是静默跳过。

  • 合并时禁止覆盖已有翻译:检查目标语言文件中已存在的 key,只插入新 key,已存在 key 保留原值(防止译员退回旧版本)
  • 不要直接写入 src/locales/zh.json——先写到 tmp/zh.json,diff 确认无误后再 mv,避免中断开发
  • 给译员提供最小可用预览页:起个本地 server,用 i18next 加载刚下载的 zh.json,访问 http://localhost:3001/preview?lang=zh 即可看效果,不用启动整站

React 组件内文案变更后如何同步更新词条

改了组件里一句文案,比如把 t('welcome') 改成 t('welcome_back'),旧词条 welcome 不会自动下线,新词条也不会自动进平台——这是众包流程里最常被忽略的断点。

解决方案是:每次提取时生成两个 diff 文件:added.json(新增 key)、removed.json(不再使用的 key)。前者自动上传 Crowdin,后者发邮件提醒负责人人工确认是否归档(有些 key 可能只是暂时注释掉,不是真废弃)。

  • 不要依赖 Git diff 判断增删——组件可能从 A 文件移到 B 文件,key 没变但路径变了,Git 会误判为删除+新增
  • removed.json 必须包含最后一次出现的 filePath 和 lineNumber,方便快速定位是否真该删
  • 上线前跑一次 npx i18n-check --strict,扫描所有组件调用的 key 是否都在当前语言包里,缺失就报错,堵住漏翻漏洞

众包翻译真正的难点不在技术实现,而在 key 的生命周期管理——谁创建、谁修改、谁废弃、谁审核,这些信息必须沉淀在结构化数据里,而不是靠人肉记忆或口头同步。

热门AI工具

更多
墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
php文件怎么打开
php文件怎么打开

打开php文件步骤:1、选择文本编辑器;2、在选择的文本编辑器中,创建一个新的文件,并将其保存为.php文件;3、在创建的PHP文件中,编写PHP代码;4、要在本地计算机上运行PHP文件,需要设置一个服务器环境;5、安装服务器环境后,需要将PHP文件放入服务器目录中;6、一旦将PHP文件放入服务器目录中,就可以通过浏览器来运行它。

10404

2023.09.01

php怎么取出数组的前几个元素
php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容,供大家免费下载体验。

6121

2023.10.11

php反序列化失败怎么办
php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容,供大家免费下载体验。

2115

2023.10.11

php怎么连接mssql数据库
php怎么连接mssql数据库

连接方法:1、通过mssql_系列函数;2、通过sqlsrv_系列函数;3、通过odbc方式连接;4、通过PDO方式;5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容,可以访问下面的文章。

3848

2023.10.23

php连接mssql数据库的方法
php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容,可以阅读本专题下面的文章。

4554

2023.10.23

html怎么上传
html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

3571

2023.11.03

PHP出现乱码怎么解决
PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5097

2023.11.09

php文件怎么在手机上打开
php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境,并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名,加上php文件的路径,即可打开php文件并查看其内容。更多关于php相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

4002

2023.11.13

PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

20

2026.10.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Symfony 官方文档
Symfony 官方文档

共0课时 | 0人学习

Composer手册
Composer手册

共0课时 | 0人学习

Symfony5【从0开始开发博客系统】
Symfony5【从0开始开发博客系统】

共120课时 | 15.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn