i18n-plan 前端多语言方案
2.3k9WEB国际化2023-06-06
想要给大家介绍一个 i18n 插件,写这个插件的起源也是因为项目中对 i18n 的需求,这个插件覆盖了我们项目中遇到的大部分 i18n 需求,说不定也能覆盖你的,try 一 try 不后悔
集成 ChatGPT 和 YouDao,自动翻译功能开箱即用
如果对你有用,可以给个 star 吗 i18n-plan
i18n-plan
i18n-plan 是一个简单的 i18n Javascript 插件,支持基于 Node.js 和浏览器的 App,并且应该适用于所有 Javascript 框架。
i18n-plan 能做什么
- 生成和更新本地语言资源,只需执行一个命令即可
- 提供导出和导入功能以便高效地管理本地语言资源。可以将本地语言资源导出为
.xls
文件,也可以通过导入.xls
文件对本地语言资源进行更新。此功能可以让团队协作管理本地语言资源 - 目前已集成 ChatGPT 和 YouDao,自动翻译功能开箱即用。此外还提供自定义选项可以将其他翻译器集成到
i18n-plan
的流程中 - 在业务代码中通过相应的键获取文本内容
- 使用模板字符串,在翻译中注入动态数据
开始教程
安装
1 | yarn add i18n-plan |
用法
创建配置文件
-
I18NPLAN.config.cjs
在的地方表示项目根目录 - 下面是个简单的用例 查看示例配置文件,包含每个配置项的详细解释
1 | // 配置文件应该由 `module.exports` 导出 |
管理本地语言资源
- 在项目根目录创建配置文件后,就可以开始使用了
- 你可以继续在项目中添加一些
.lan.json
文件。.lan.json
是i18n-plan
的命名约定,表示该json
文件是语言资源的一部分
1 | |-- project |
- 现在我们创建了两个
.lan.json
文件:page1.lan.json
和page2.lan.json
, 假设文件内容是:
1 | // page1.lan.json |
- 现在可以在终端中执行
npx i18n-plan
命令来生成语言资源。 查看有关 import / export / translation 命令详情 - 在搜集过程中, 程序会从根目录开始搜寻所有以
.lan.json
为后缀的文件。根据上面的配置文件, 在build/locales
目录中,会生成两个文件:en-US.json
andes-MX.json
. -
lan.json
文件的名称会作为它的集合的key
。如果两个及以上的.lan.json
文件有着相同的名称,那么这些文件的内容会被合并。
1 | { |
翻译
- 将
auto
设为true
来启用自动翻译功能 - 查看示例配置文件,包含每个配置项的详细解释
1 | { |
- 现在你可以在
resolve
配置翻译相关的设置
ChatGPT
- Api key 和 Organization key 是必需的
- 如果你所在的地区需要通过 VPN 才能访问 ChatGPT, 那么
proxy
配置是必需的
1 | interface TranslationResolveChatgpt { |
有道翻译
- ID 和 应用 ID 是必需的
1 |
|
自定义集成
-你可以集成你需要的翻译服务到 i18n-plan
流程中,比如谷歌翻译或者 DeepL
1 | type Translator= (props: { config: Config; from: string; to: string; content: I18NPLAN.TranslationContent[] }) => Promise<I18NPLAN.TranslationContent[] | TranslationError> |
在 App 中使用
- 按照以上示例,我们已经生成了语言资源包, 那么现在我们可以在业务代码使用了
setLan
- 该函数可以用于保存语言资源。语言资源可以通过 import 来导入,如果担心包体积太大也可以通过
Ajax
请求来动态获取 - 可以被调用多次来合并语言资源
- 包含两个参数:
参数 | 描述 |
---|---|
lanRes | Json 格式的语言资源 |
isReset | 是否重置已有资源,反正合并。默认: false |
1 | function setLan(lanRes: I18NPLAN.Lan, isRestore?: boolean): I18NPLAN.Lan |
getLan
- 此函数根据路径返回键对应的值
- 包含两个参数:
参数 | 描述 |
---|---|
key | key 的路径 |
params | 一个对象,用于填充模板字符 |
1 | function getLan(key: string | string[], params?: Record<string, I18NPLAN.BasicLanValue>): I18NPLAN.BasicLanValue | undefined |
示例
1 | import { setLan, getLan } from "i18n-plan" |
可执行命令
- 收集和更新本地语言资源
- 该命令将在根目录中查找 ‘.lan.json’ 文件,并将文件中的所有条目合并以生成参考语言资源。该文件将作为更新其他语言的基础。
1 | npx i18n-plan |
- 翻译给定的
key
对应的内容
1 | // 如果你想要翻译 `page1` 和 `page2` 中的 `name` |
1 | npx i18n-plan translate path=<指向 .json 文件的绝对路径> |
- 导出和导入
1 | npx i18n-plan export path=<指向 .xls 文件的绝对路径> |
配置文件
1 | module.exports = { |
更新时间:2023-06-06
转载请注明来源,欢迎指出任何有错误或不够清晰的表达