开箱即用的轻量级 JavaScript 国际化自动翻译解决方案

[eyelly]

i18n-pro：让国际化变得轻松且愉快

之前在 上一个帖子 对该方案有详细介绍，这里简要分享最新进展

方案简介

本方案的一个特性是 keyless，即推崇 文案即 key。但在遇到 一词多义 或不同语言显示内容无关联的场景时，原方案存在局限。

为此，3.0 版本进行了增强

示例效果

2.0 示例

// 文案即 key
const text = t('hello world')

自动翻译生成的中文语言包：

{
  "hello world": "你好世界"
}

3.0 示例

// 文案即 key
const text = t('hello world')
// 自定义 key
const customKeyText = t.t('custom-key', 'hello world')

自动翻译生成的中文语言包：

{
  "hello world": "你好世界",
  "custom-key": "你好世界"
}

说明

3.0 新增了 自定义 key 支持：

• 文案即 key：适用于普通文案，直接写 t('普通的文案') 即可。
• 自定义 key：适用于“一词多义”或不同语言显示内容无关联的场景，写法为 t.t('a-custom-key', '具体文案')。 特别说明：采用此形式后，文案发生变化，重新翻译不会影响已生成的语言包。

此外，核心 JS 库已适配 React 、Vue3/Vue2 、Solid 、Svelte 等主流前端 UI 框架。新版本让我们的愿景“让国际化变得轻松且愉快”又更近了一步。 详细内容可访问 https://github.com/i18n-pro 了解，希望对各位开发者朋友们有帮助，欢迎交流和反馈！

[hamsterbase]

我也搞过类似的项目

https://i18nease.hamsterbase.com/

vscode 插件，修改代码后自动生成.

代码里面写类似于

localize('settings.showCompletedTasks', 'Show Completed Tasks'),

这样的文案， 会自动解析 ast ，然后生成 json

"settings.showCompletedTasks": {
"defaultMessage": "Show Completed Tasks",
"content": "Show Completed Tasks"
},

"settings.showCompletedTasks": {
"defaultMessage": "Show Completed Tasks",
"content": ""
},


如何避免 key 重复： 写一个 eslint 插件，提交代码的时候检查，确保 key 对应的 message 都是唯一的
如何避免英文修改后，其他语言还保留： 生成 json 的时候判断 defaultMessage 是否改变，改变后清空翻译

[Moyyyyyyyyyyye]

很好的设计，牛

[eyelly]

@hamsterbase 看了你的工具也是不错的，不过你的这个插件主要是解决自动翻译这一步，i18n-pro 的是则是整个国际化方案，`自动翻译` 这块儿是有重合的。而且你还做成了收费功能，值得学习

[eyelly]

@Moyyyyyyyyyyye 谢谢，😄