前端另外一种多语言的实现思路

多语言i18n往常的作法是一个语言一个配置文件, 可是这样须要添加一个新的字符串时, 须要逐个打开许多个语言文件, 经常会漏, 而且每次修改一个字符都要编辑好几个文件. 咱们换一种思路, 把 i18n 的多语言直接写在当前代码中,而不是写在配置文件中.

思路

用一个方法,根据开发环境\当前浏览器语言去处理应该使用哪一个字符串, 而且暴露设置当前语言的函数,以兼容 nodejs 端或者开发人员扩展其余语言. 该库仅仅不到 70 行代码, 实现一个精巧的i18fn.

使用

安装 i18fn 库:

$ npm i --save i18fn
复制代码

const i18fn = require('i18fn');
const hello = i18fn.lang({ english: 'hello', chinese: '你好' });
console.log(hello);
复制代码

使用参数

const i18fn = require('i18fn');
const personHello = i18fn.lang(
    { English: '__person__, hello', Chinese: '__person__, 你好' },
    {
      person: { English: 'Mr.Ming', Chinese: '小明' },
    },
  );
console.log(personHello);
});
复制代码

自动语言缺失排查

若是浏览器语言是中文, 而你忘记添加中文的语言内容, 在开发模式中会作错误提示, 以下面这行代码:

const say = i18fn.lang({ English: 'hello' });

// 在生产环境, i18fn 使用英文做为代替
// 在开发环境, i18fn 会添加 - [Miss i18fn: languageType] 在英文后头
if (process.env.NODE_ENV === 'production') {
  console.log(say); // hello
} else {
  console.log(say); // hello - [Miss i18fn: english]
}
复制代码

设置当前语言

若是咱们要使用设置修改当前语言，能够手动修改当前语言以覆盖浏览器的语言识别:

const i18fn = require('i18fn');

i18fn.setNowLanguage('Chinese');
复制代码

若是你仍是喜欢把 i18n 写在配置文件里

若是咱们但愿文案能够更好的复用, 咱们也能够这样把多个语言写在一个文件中:

const { lang } = require('i18fn');
const languages = {
  done: lang({ English: 'done!', Chinese: '完成!' }),
  hello: lang({ English: 'hello', Chinese: '你好' }),
};

// use
console.log(languages.done);
console.log(languages.hello);
复制代码

当前支持自动识别的语言

• English
• Chinese
• ChineseTraditional
• Dutch
• Korea
• French
• German
• Japanese
• Italian
• Portuguese
• Spanish
• Swedish
• Russian
• Arabic
• Vietnamese
• Polish
• Finnish
• Afrikaans
• Khmer
• Thai
• Turkish
• Ukrainian
• Zulu

增长其余语言判断

若是你的应用须要添加匈牙利, 你能够这样:

const i18fn = require('i18fn');

i18fn.addLanguage('hu-HU', 'Magyar');

// ok like default use:
const hello = i18fn.lang({ English: 'hello', Magyar: 'helló' });
console.log(hello);
复制代码

测试可靠性

安装测试包:

$ yarn install && yarn test
复制代码

你能够尝试测试, 测试内容编写在 src/index.test.js, 如下是经过的测试:

$ jest
 PASS  src/index.test.js
  ✓ test chinese (4ms)
  ✓ test english
  ✓ test english params (1ms)
  ✓ test english params, use object
  ✓ test config
  ✓ test config function (1ms)
  ✓ test error chinese
  ✓ test error english
  ✓ test error chinese prod
  ✓ test error english prod (1ms)
  ✓ test add other language

Test Suites: 1 passed, 1 total
Tests:       10 passed, 10 total
Snapshots:   0 total
Time:        1.257s
Ran all test suites.
✨  Done in 1.80s.
复制代码

这就是所有, 谢谢!

i18fn is MIT licensed.

Github 地址

github.com/ymzuiku/i18…