Turnip-Calculator如何支持26种语言i18next国际化方案与自动生成脚本实战【免费下载链接】Turnip-CalculatorACNH Turnip Calculator Responsive Web App项目地址: https://gitcode.com/gh_mirrors/tu/Turnip-Calculator动森大头菜价格计算器 Turnip-Calculator 是一个帮玩家预测「动物森友会」中大头菜价格走势的响应式 Web 应用它基于 i18next 国际化方案让界面完整支持 26 种语言并通过自动生成脚本在每次安装时一键同步语言配置让全球玩家都能用母语查菜价 为什么大头菜计算器需要国际化大头菜行情是全世界玩家共同关注的话题但界面语言如果只有英文对很多新手玩家并不友好。Turnip-Calculator 的目标是无论你的设备是什么语言环境打开页面就能看懂买入价格、保底价格、最可能区间这些核心概念。实现这件事只用了三件套i18next负责翻译资源的加载与切换每个语言一个目录翻译文件统一存放在src/locales/下一个自动生成脚本yarn install时自动完成语言清单的同步核心方案i18next 配置与语言自动检测整个国际化的入口只有一个文件src/i18n.js。它的配置思路非常简洁主要有三个关键点多来源语言检测通过i18next-browser-languagedetector插件按URL 查询参数 → Cookie → localStorage → 浏览器语言 → HTML 标签的顺序自动猜测用户语言用户无需任何操作英文兜底fallbackLng: en保证即使检测到的小众语言没有翻译文件界面也不会出现空白关闭 key 嵌套设置keySeparator: false直接用翻译文案本身作为 key翻译起来一目了然。detection: { order: [ querystring, cookie, localStorage, navigator, ], }, fallbackLng: en,React 侧则通过react-i18next的useTranslation()钩子取用翻译组件里像 src/utils/useTitle.js 这样的小工具也能让浏览器标签页标题跟随语言实时变化。翻译资源组织一语言一目录所有翻译资源集中在 src/locales/ 目录下每个语言一个文件夹文件夹里只有一个translation.json例如英语基准文件src/locales/en/translation.json简体中文文件src/locales/zh-CN/translation.json文件内容就是一组英文原文 → 目标语言译文的键值对结构非常直观{ Buy Price: 买入价格, Guaranteed Min: 保底价格, Most Likely: 最可能区间 }这种以英文原文为 key的约定有两个好处新人贡献者不需要理解代码结构就能翻译缺漏某条 key 时界面会直接显示英文原文方便排查。自动生成脚本安装时一键同步 26 种语言语言目录越来越多后最大的维护痛点是每新增一种语言都要手动改导入语句。Turnip-Calculator 用一个 50 行左右的脚本解决了它——scripts/i18n.js。它的工作流程只有三步扫描src/locales/下的所有语言文件夹借助countries-list与iso-639-3两个依赖把语言代码换算成本土名称比如pt-BR会显示为葡萄牙语 (巴西)、zh-CN显示为简体中文自动生成src/locales/index.js把所有语言的翻译文件打包导出为translations供 i18next 加载同时导出语言名列表list供语言切换器展示。而这个脚本并不需要手动执行——package.json 中配置了postinstall: node scripts/i18n.js也就是说任何人只要执行yarn install语言清单就会自动重新生成。新增第 27 种语言只需要新建一个文件夹、放入translation.json再重装一次依赖切换器里就会自动多出一个选项 ✅语言切换器让每个玩家自由选择自动检测解决第一次访问的体验而页面上的语言切换器解决想换语言的需求。它位于 src/containers/Localizer.jsx实现了两个细节用 Material-UI 的Breadcrumbs把 26 种语言名排成可点击的面包屑导航一眼可辨用户选择后调用i18n.changeLanguage(tag)立即切换并用react-use的useLocalStorage把选择写入 localStorage——下次访问时语言检测器就会优先读取它用户的选择被长期记住。新手贡献指南给项目添加一个新语言得益于上面的设计参与翻译的门槛极低流程是复制 src/locales/en/ 目录为新语言的目录名如xx将translation.json里的英文值逐条翻译成目标语言执行yarn install触发自动生成脚本切换器中即出现新语言。整个过程中不需要改动任何业务组件代码——所有界面组件表格、图表、对话框、筛选器都只是消费翻译天然与语言解耦。小结Turnip-Calculator 的国际化方案给出了一个值得借鉴的轻量级范式关注点方案翻译加载与切换i18next react-i18next语言检测多来源自动检测 英文兜底资源组织一语言一目录英文原文做 key配置同步postinstall 自动生成脚本用户选择localStorage 持久化语言偏好这套约定优于配置的思路让一个玩家自制的小工具也能轻松扩展到 26 种语言对任何想做国际化的新手项目都很实用 【免费下载链接】Turnip-CalculatorACNH Turnip Calculator Responsive Web App项目地址: https://gitcode.com/gh_mirrors/tu/Turnip-Calculator创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考