i18n-json-compiler 一个为TypeScript编写的国际化计划

2023年5月6日 212次阅读 来源: acrazing

在写一个APP的过程当中, 难免会碰到要做国际化的时刻. 也就是须要依据差别的区域, 展现差别的案牍. 关于简朴的文本, 直接用一个xml或许json或许一个变量就能够搞定, 然则有时刻须要在一句话中到场变量, 就比较贫苦或许说比较恶心了. 比方如许的状况:

cn: 有xx个人喜好了你.
en: xx People liked you.

i18n-json-compiler应运而生, 其作用是将json模板编译成TypeScript(或许JavaScript)函数或许字符串.

比方对以下json:

[
  { "cn": "你好", "en": "Hello" },
  { "cn": "{n}个挚友", "en": "{n} friends" },
]

能够直接编译出ts文件, 内容大抵以下:

export const cn = {
  Hello: "你好",
  n_friends: (n: any) => n + "个挚友",
}

export const en = {
  Hello: "Hello",
  n_friends: (n: any) => n + " friends",
}

在代码中直接挪用响应的属性或函数即可.

装置

yarn add i18n-json-compiler
# 或许运用npm/cnpm
npm i -S i18n-json-compiler

运用

在敕令行中, 实行./node_modules/.bin/i18n, 参数以下:

i18n [options] - Parse i18n json files to typescript files.

Options:
  -i, --input-files  The json files to parse                 [string] [required]
  -o, --output-dir   The directory to emit output            [string] [required]
  -h, --help         Show help                                         [boolean]
  -v, --version      Show version number                               [boolean]
  --default-lang                                        [string] [default: "cn"]

JSON文档的花样

i18n敕令接收参数-i指定输入文件列表(glob), 比方./strings/*.json, 文件花样为json, 内容为一个数组. 每一个数组元素为一组须要编译的字符串. key为言语, value为值. 值中被{}包起来的处所会被转换为函数参数, 其花样为{name:type:default}, 个中:

  • name是必须的, 能够是字符串或数字
  • type为数据类型, 能够是int, double, string, boolean, any, 默以为any, 即接收恣意参数
  • default为参数默认值

比方:

[
  {
    "cn": "{n:int:1}个人喜好了你",
    "en": "{n}people liked you"
  }
]

得出的效果为:

const n_people_liked_you = (n: int = 1) => n + '个人喜好了你'

输出花样

i18n接收参数-o指定输出目次, 输入目次中, 包含一个index.ts文件, 以及多少言语文件夹, 个中index.ts为所用到的文件, 其导出一个变量strings, 构造以下:

export interface I18n<T, L> {
  // 设置言语
  set(lang: string, defaultLang?: L): void;
  // 猎取言语下的字符串对象
  get(lang: string, defaultLang?: L): T;
  // 当前言语
  lang: L;
  // 当前言语的字符串构造
  value: T;
}

例子

参考https://github.com/acrazing/i…, 个中input为输入目次, output为输出目次. 在代码中, 只须要:

import { strings } from './output/index.ts'

console.log(strings.value.world.$0_people_liked_you(1))

TODO

  • 编译成js
  • 差别言语参数位置差别
  • 指定称号key

更多内容, 请稳步 https://github.com/acrazing/i…

    原文作者：acrazing
    原文地址: https://segmentfault.com/a/1190000013010394
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞