smallfish

国际化

目前的 smallfish 对国际化的支持只有多语言，但是在后续我们会逐步增加更多国际化的支持。

使用多语言

开启 smallfish i18n

// config/config.js
{
  "i18n": true
}

设定语言包

smallfish 规定在 src/i18n 下存放你的语言包，像这样：

── src
   ├── ...
   ├── i18n               // * 国际化相关数据
   |   ├── zh-CN.json     // * 中文语言包
   |   ├── en-US.json     // * 英文语言包
   |   ├── *.js           // * 单个语言的国际化数据
   |   └── index.js       // * 国际化语言数据入口文件
   └── ...

可以看到，i18n 目录下有一个入口文件和语言包，入口文件很简单，就是引入各个语言包：

module.exports = {
  'en-US': require('./en-US.json'),
  'zh-CN': require('./zh-CN.json'),
};

语言包的 json 就更简单了，都是键值对，如下：

// src/i18n/en-US.json
{
  "sf_page_SubPage_ChineseTest": "Chinese test",
  "sf_page_SubPage_LaLa": "La, la",
  "sf_page_SubPage_HaHaHa": "Ha ha ha",
  "sf_page_SubPage_IAmContinueToThe": "I am continue to the test",
  "sf_page_SubPage_IThink": "I think",
  "sf_page_SubPage_Is": "Is",
  "sf_page_SubPage_Big": "Big",
  "sf_page_SubPage_DDaysHHours": "{{d}} days {{h}} hours",
  "sf_page_SubPage_IAmTestHaHa": "I am test ha ha ha",
  "sf_page_SubPage_INowWithTheLanguage": "I now with the language a is {{inlanguage}}"
}

在代码里面使用

import i18n from 'smallfish/i18n';
import { Alert } from 'smallfish/antd';

export default () => (
  <div>
    <Alert message={i18n.t('sf_page_SubPage_LaLa')} />
    <span>
      {i18n.t('sf_page_SubPage_INowWithTheLanguage', {
        inlanguage: i18n.language,
      })}
    </span>
  </div>
);

smallfish/i18n 的底层是 i18next，smallfish 已经帮你配置好了常用的方案，如果有更多需要可以参看对应的文档。

设置默认语言

通常 smallfish/i18n 会检测用户的系统信息自动设置对应的语言，但是如果你想手动设置默认语言可以通过如下方式：

调用 changeLanguage 方法

import i18n from 'smallfish/i18n';

i18n.changeLanguage('zh-CN');

日期多语言

在 smallfish 中我们用 moment 套件做时间日期管理，moment 本身提供了多语言的设置，所以使用也很方便。

// 引入对应的语言包
import 'smallfish/util/moment/locale/zh-cn';
import moment from 'smallfish/util/moment';

moment.fromNow(); // output: 几秒前

更多语言样例参看：moment i18n

自动提取项目文案

目前暂未支持，敬请期待

smallfish 底层依赖了强大的 parrot-tool-must 工具，能够提取项目的文案，这样即使老旧的项目也可以一键替换为支持多语言的项目。

快速上手

修改你的 package.json，增加 i18n 命令：

{
  script: {
    ...
    i18n: 'smallfish i18n',
    ...
  }
}

根目录下运行命令：

# [path] 为指定需要提取的路径，默认是根目录
$ npm run i18n [path] // or yarn i18n [path]

在运行这个命令会做如下几件事：

  1. smallfish i18n 会扫描对应目录下的所有文件，提取出中文/英文，然后替换这些文案为 i18n 方法：
+ import i18n from 'smallfish/i18n';
import { Alert } from 'smallfish/antd';

export default () => (
  <div>
-    <Alert message="我本来是个中文" />
+    <Alert message={i18n.t('sf_page_SubPage_LaLa')} />
-    <span>当前语言是{inlanguage}</span>
+    <span>
+      {i18n.t('sf_page_SubPage_INowWithTheLanguage', {
+        inlanguage: i18n.language,
+      })}
    </span>
  </div>
);
  1. 自动把提取出来的文案增量添加到语言包中，目前支持中文到英文的自动转换，后续还会支持更多语言：
// src/i18n/zh-CN.json
{
  ...
  "sf_page_SubPage_LaLa": "我本来是个中文",
  "sf_page_SubPage_INowWithTheLanguage": "当前语言是{{inlanguage}}",
  ...
}

// src/i18n/zh-CN.json
{
  ...
  "sf_page_SubPage_LaLa": "i am chinese",
  "sf_page_SubPage_INowWithTheLanguage": "current language is {{inlanguage}}",
  ...
}

大功告成，这个操作是增量的，所以在日常开发中你完全可以无需关心多语言替换问题，开发完毕一键替换即可。

←