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

做前端搞过 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 库和不同的打包工具。