tant-intl：新的国际化解决方案

tant-intl是数数科技用来解决前端国际化的新的自定义方案，需要配合phrase平台使用，如果您也对这种方式该兴趣请联系邮箱1459736624@qq.com。
传统的方案是在本地目录由开发实时维护多个语言包，开发时经常会出现多个语言包难维护或不
一致的情况，在项目打包后又会因为语言包体积大而导致最终打出的包过大。
tant的解决方案是将语言包独立到项目的public目录下，页面加载时需要优先将语言包读取到内存中，然后其他的js才会继续加载执行。通过后台系统的配合可以保证语言包实时更新而不需要开发去手动维护。如果出现缺词漏词的情况，在开发时也会在控制台有对应的提示。

使用说明

预先

可以通过npm i tant-intl来安装组件。

修改启动方式

修改package.json里面的启动方式，对于start启动，请改成如下格式
"start": "原有的启动命令 & tant-intl
而对于build启动，请改成如下格式
"build": tant-intl build && 原有的启动命令

修改配置信息

请在项目根目录下新增intl.json文件来支持用户自定义配置
其中配置格式如下:
``

javascript
{
  "token": string;phrase平台的用户token,
  "usePhrase": boolean;生产模式是否直接只用phrase文案,
  "outPaths": [
    {
      "path": string;开发模式下输出目录,
      "buildPath": string;生产模式下输出目录,
      "projectIds": [
        {
          "projectId": string;项目id,  
          "branch": string;分支名,  
          "tags": string[];标签数组，为空或不配置表示全部。需要保证多个项目内的tag都是唯一的，不然会只取前者
        }
      ]
    }
  ]
}


配置预置脚本

请在public/intl目录下新增intl.js文件，内容为

javascript
var r=new XMLHttpRequest();var w=window;if(w.ActiveXObject){r = new ActiveXObject("MsXml2.XmlHttp");}r.onreadystatechange=()=>{if(r.readyState==4){window.intl=JSON.parse(r.responseText||{});}};r.open('GET',

/intl/${window.localStorage.getItem('umi_locale')||'zh-CN'}.json

,false);r.send(null);


他的作用是页面加载时从public加载对应语言的语言包到window对象的intl对象中，其中语言选项配置在localstorage的umi_locale中。  
为此需要在public下的index.html（umi为pages目录下的document.ejs）中加入script标签，请确保在所有script标签前面

html


代码使用

可以通过

import { formatMessage } from 'tant-intl';

导入formatMessage函数来实现国际化。  
函数有两个参数，第一个为对象，内容为{ id: 词汇ID }，如果有动态内容，请在翻译语句中使用

{变量名}

,然后传入第二个参数，也是个对象，
内容为{变量名：变量值，...}
如果要切换语言类型，可以通过

import { setLocale, getLocale } from 'tant-intl';`导入setLocale函数来操作，他有两个参数，第一个是语言类型：默认'zh-CN'，函数执行后页面会刷新。而getLocale可以获取到当前语言类型

tant-intl：新的国际化解决方案

修改配置信息

javascript
{
"token": string;phrase平台的用户token,
"usePhrase": boolean;生产模式是否直接只用phrase文案,
"outPaths": [
{
"path": string;开发模式下输出目录,
"buildPath": string;生产模式下输出目录,
"projectIds": [
{
"projectId": string;项目id,
"branch": string;分支名,
"tags": string[];标签数组，为空或不配置表示全部。需要保证多个项目内的tag都是唯一的，不然会只取前者
}
]
}
]
}

配置预置脚本

请在public/intl目录下新增intl.js文件，内容为

javascript
var r=new XMLHttpRequest();var w=window;if(w.ActiveXObject){r = new ActiveXObject("MsXml2.XmlHttp");}r.onreadystatechange=()=>{if(r.readyState==4){window.intl=JSON.parse(r.responseText||{});}};r.open('GET',

,false);r.send(null);

他的作用是页面加载时从public加载对应语言的语言包到window对象的intl对象中，其中语言选项配置在localstorage的umi_locale中。
为此需要在public下的index.html（umi为pages目录下的document.ejs）中加入script标签，请确保在所有script标签前面

html

代码使用

可以通过

导入formatMessage函数来实现国际化。
函数有两个参数，第一个为对象，内容为{ id: 词汇ID }，如果有动态内容，请在翻译语句中使用

,然后传入第二个参数，也是个对象，
内容为{变量名：变量值，...}
如果要切换语言类型，可以通过