做了个工具解决 i18n 翻译协作痛点 - 翻译人员直接在页面上改文案，实时同步代码

[weixind]

做前端搞过 i18n 的应该经历过的痛苦：开发改完代码，导出翻译文件，翻译人员看着 Excel 里一堆文字不知道用在哪里，改完后导入，UI 发现长度不对，又要重新调...无限循环。

于是我做了个工具来解决这个问题, 也希望给大家一个解决相关问题的思路。

原来的协作流程

开发完成中文版 --> 导出文案/AI 翻译(通过在线文档或者 excel 协作) --> 翻译人员检验以及做本地化 --> 导入项目 --> UI/翻译调整 --> 开发调整 --> 翻译/UI 走查。

具体痛点：

1. 流程反复：后半段容易无限循环，开发变成了"改翻译文件工具人"

2. 上下文缺失：翻译人员只看到 Excel 里的文字，不知道在哪用

   • 例如"序号"，在表格标题和列表序号应该用不同英文，但翻译人员无法区分

3. UI 适配难：英文翻译长短不一，需要适配 UI ，但翻译人员看不到效果

   • 例如"确定"翻译成 "Confirm" 还是 "OK"？要看按钮大小才知道

新的协作流程

开发完成中文版 --> 起一个开发服务给到翻译 --> 翻译人员可以在页面更改文案，所见即所得（自动同步到开发人员代码） --> 提交代码（收工）

核心特性：

按住 Ctrl/Cmd+Shift 点击页面文案即可编辑

实时预览效果：修改后立即看到 UI 变化，不用来回确认

自动同步代码：修改自动写入开发本地翻译文件，触发热更新

零侵入接入：只需加个插件，几行配置，生产代码零影响

demo 视频: https://github.com/user-attachments/assets/15e14439-8a14-4054-80b0-f07ccbcea1b1

在线 demo: https://stackblitz.com/github/erweixin/i18nflow/tree/main/playground/react-kiwi-rspack?file=src/App.tsx

GitHub: https://github.com/erweixin/i18nflow 欢迎 Star 、提 Issue 和 PR ！

---

有类似痛点的朋友欢迎试用反馈，也欢迎大家提建议~

针对 kiwi-intl 在 rspack/vite 中使用已经生产 ready 。

react-i18next 在 nextjs/rspack 中使用也已经进入测试阶段。

后续会陆续接入其他 i18n 库和不同的打包工具。

[nzm]

期待支持更多 i18n 库

[zhmouV2]

你好 demo 视频链接 404 了

[22092]

在线 DEMO 看到的是 ：

1.修改后要 reload 整页

2.重置 button 不是重置到上一个更改，只是 reset 当前输入变更

3.Ctrl/Cmd + Shift 点击页面文案会有选取效果，影响视觉

更关注 {count} 字串插值, 表达式

[weixind]

@zhmouV2

https://github.com/user-attachments/assets/cbe668be-2380-4e37-b97e-34dfbd9e27c7

这个链接应该可以

[weixind]

@22092

感谢反馈。

1. 修改后改成走 HMR 。
2. 这个我再想想。
3. 我觉得改成类似 devtool 以后 hover 到某个节点高亮的交互会好一些。

最近会改动 1 、3 。

普通单层 {count} 字串插值和表达式是支持的。可以参考这个 demo:https://stackblitz.com/github/erweixin/i18nflow/tree/main/playground/react-i18next-rspack

多层嵌套的情况还不支持，例如以下写法：

t('userForm.errors.required', { field: t('userForm.confirmPassword')})

[hoodjannn]

几年前有这个需求。现在我都是直接拿好审核后的 json 翻译，然后丢给 claude code 直接改就好了，不看多语言

[unco020511]

可以,对于我来说有一些价值,已 star

[22092]

我知道 i18next 是支持的，期望的是在 UI ，否则这个 UI 感觉作用不大，现在是翻译人员检验并不是传统的翻译工作，传统的翻译已交给 AI 了

[22092]

注重校对方面更有利发展，所以 editor, git history 不可少的

[penzi]

上下文缺失：翻译人员只看到 Excel 里的文字，不知道在哪用

例如"序号"，在表格标题和列表序号应该用不同英文，但翻译人员无法区分


你们需要的是给每个 string 加一个 comment, 这才是正经需要多语言的公司在用的标准流程

[weixind]

@penzi 感谢分享