React项目国际化（antd）多语言开发
时间：2023-04-05 00:24:52
HTML5
前言最近接手一个新项目，从0开始，需要做多语言国际化。今天做了，基本达到了想要的效果。简单到这里分享：背景国际化方案概览国际化方案前端国际化详解实例国际化资源文件管理项目、开发者、译者协作国际化规范附录拓展阅读国际化方案概览国际化是一个看起来很简单，其实很复杂领域，在实际做国际化工作的时候，你会发现往往涉及到很多内容：前端国际化、服务端国际化、国际化资源文件管理项目、开发人员和翻译人员的协作，而且国际化解决方案往往与具体的技术绑定堆栈。本国际化方案仅针对React技术栈，不涉及服务端国际化内容。前端国际化详解，示例国际化核心步骤有两步：创建资源文件，以key-value的方式存储和加载资源文件，将页面中key的内容替换为relevantvalue一些探索不算探索，只是Google了一波，在GitHub上找到了一个比较成熟的库如下：react-i18nextreact-intlreact-intl-universa接下来介绍如何使用react-i18next安装npminstalli18nextreact-i18next--savetoimportApp.jsimporti18nfrom'i18next';import{useTranslation,initReactI18next}from'react-i18next';initconstlng='en';i18n.use(initReactI18next)//向下传递i18n以进行反应-i18next.init({resources:{en:{translation:{Welcome:'WelcometoReact',},},zh:{translation:{Welcome:'Welcometoreact',},},},lng:lng,fallbackLng:lng,插值:{escapeValue:false,},});实际上使用结果函数App(){const{t}=useTranslation();return({t('Welcome')}
);}导出默认应用；封装结果：//...importi18nfrom'@src/i18n';//xxxcomponentconsole.log('i18ncomeone发送：',i18n.t('INVALID_ORDER'));render(){//...
}react-intl背景：用于国际化React组件，提供React组件和API来格式化日期、数字、字符串(包括单复数和翻译）react-intl库是业界最受欢迎的库之一。react-intl以封装组件的形式装饰你的React.Component，动态注入国际化消息，让locale数据可以动态加载，无需重新加载页面安装：npminstallreact-intl--saveloads语言环境数据。ReactIntl依靠这些数据来支持单复数和相对时间格式化功能。//Main.jsimport{addLocaleData}from'react-intl';/*react-intlimports*/importenfrom'react-intl/locale-data/en';从'react-intl/locale-data/zh'导入zh';addLocaleData([...en,...zh]);//引入多语言环境数据虽然我只使用了文本翻译的功能，本来以为不需要加载这些数据，后来发现这是必须的一步。否则会报错：[ReactIntl]Missinglocaledataforlocale:"zh"。使用默认语言环境：“en”作为后备。使用
组件包裹需要国际化的根组件。此组件树稍后将在i18n上下文中配置。由于项目中使用了react-hot-loader，所以根组件Main被包裹，Main组件是从一个单独的文件导入的。//app.jsimport{AppContainer}from'react-hot-loader'importMainfrom'./components/Main'//...constrender=Component=>{ReactDOM.render(,document.getElementById('app'))}render(Main);所以直接在Main.js中使用组件。只需将其添加到render()返回的节点的最外层即可。//Main.jsimport{addLocaleData,IntlProvider}from'react-intl';/*react-intlimports*/render(){return(//···)}为每种语言添加更多文本。比如你要支持中文和英文，为了方便以后维护，可以新建两个文件：在locale目录下新建一个文件//en_US.jsconsten_US={hello:"Hello!",//......}exportdefaulten_US;//zh_CN.jsconstzh_CN={hello:"Hello!",//......}exportdefaultzh_CN;然后在Main.js中引入这两个变量。//Main.jsimportzh_CNfrom"../locale/zh_CN"//importdefinedmessagesinChineseimporten_USfrom"../locale/en_US"//importdefinedmessagesinEnglish全局配置当前语言和对应的文本。即配置组件的locale和messages两个属性。//Main.jsrender(){letmessages={}messages['en']=en_US;messages['zh']=zh_CN;return(//···)}这样基本的配置就完成了，页面可以通过更改this.state.lang的值来更改语言。//Main.js/***Changelanguage*@param{String}langnewlanguage*/changeLanguage(lang){this.setState({lang:lang})}接下来在页面中添加翻译后的文字，基本上就是A需要使用组件：。该组件默认生成一个，内容为翻译后的文本，即消息中对应字段的值。在需要添加国际化文本的组件中，引入FormattedMessage组件。从'react-intl'导入{FormattedMessage}；/*react-intlimports*///......当前语言为en时，生成结果：Hello!至此，react-intl的基本国际化就实现了。末尾的写法必须填写defaultMessage，并使用defaultMessage作为中文翻译id。不得重复。使用intl.formatMessage()时，您必须使用defineMessages，一种预定义的消息扩展。阅读react-intlreact-intl-corner-casesreact-intl-universal背景：by阿里巴巴推出的react国际化库最好的地方在于使用方便，安装侵入性小。使用npm安装npminstallreact-intl-universal--saveinitialization在初始页面初始化库和配置语言包。json文件要看它需要支持多少种语言。下图只支持中英文image.png。在项目入口文件中配置国际化importintlfrom'react-intl-universal';//localedataconstlocales={"en-US":require('./locales/en-US.json'),"zh-CN":require('./locales/zh-CN.json'),};classAppextendsComponent{state={initDone:false}componentDidMount(){this.loadLocales();}loadLocales(){//react-intl-universal是单例模式，应该只实例化一次intl.init({currentLocale:'en-US',//TODO:determinelocaleherelocales,}).then(()=>{this.setState({initDone:true});});}render(){return(this.state.initDone&&{intl.get('SIMPLE')}
);}}语言配置文件可以是json或js，json格式如下：英文配置文件./locales/en-US.json{"SIMPLE":"SimpleSentence","LANG_TYPE":"paas-us","INPUT_MOBILE":"MobileNumber","HELLO":"你好，{name}。欢迎来到{where}！"}中文配置文件./locales/zh-CN.json{"SIMPLE":"简单句","LANG_TYPE":"paas-cn","INPUT_MOBILE":"手机号码","HELLO":"您好，{name}欢迎来到{where}！"}Call在刚才的初始化代码中，已经调用了render函数。在整个项目的其他地方，由于已经初始化过了，直接调用即可。调用示例如下：importintlfrom'react-intl-universal';classTestextendsComponent{render(){return({intl.get('INPUT_MOBILE')}
);}}switch再看看初始化函数intl.init({currentLocale:'en-US',//TODO:determinelocaleherelocales,})初始化时，除了直接指定语言外，函数determineLocale还可以还可以根据下面的配置指定：Url当前浏览器的语言（不配置query参数和cookie参数时）这些配置生效如下代码所示：letcurrentLocale=intl.determineLocale({urlLocaleKey:"lang",cookieLocaleKey:"lang"});intl.init({currentLocale,//此处判断语言环境locales,})然后，我们可以使用如下方法进行切换：选择对应语言时，回调函数为触发，函数内修改url或cookie，然后刷新页面，重新初始化，就可以切换语言了。下面我给出一个基于cookies切换的例子：handleClick=(lang)=>{Cookies.set('lang',lang,{expires:'1Y'});window.location.reload(true);}Advancedreact-intl-universal库在语言处理方面还有很多其他的功能，比如：HTML文本变量带有HTML标签的单复数形式currencydatehtml引用资源包中的文本a.纯文本，使用intl.get(){intl.get('SIMPLE')}
b。对于带有html模板的文本，请使用intl.getHTML()方法。比如资源包中定义了this{"SIMPLE":"ThisisHTML"}引用时，使用getHTML()方法获取文本{intl.getHTML('SIMPLE')}
数字形式和千位分隔符下面例子中的变量是num。标记为复数后，其值只能是数字。当num值为0时，显示“无照片”；值为1时，显示“一张照片”；当值为其他数字如25000时，显示“25,000张照片。”，其中'#'表示在num的值上加上千位分隔符并显示{"PHOTO":"Youhave{num,plural,=0{nophotos.}=1{onephoto.}other{#photos.}}"}参考结果如下：intl.get('PHOTO',{num:0});//"你没有照片。"intl.get('PHOTO',{num:1});//“你有一张照片。”intl.get('PHOTO',{num:1000000});//“你有1,000,000张照片。”显示货币格式的具体语法是{变量名，类型，格式}。在下面的例子中，变量名为“price”，其类型为number，“USD”表示在值前加一个美元符号($){"SALE_PRICE":"Thepriceis{price,number,USD}"}参考和显示结果如下：intl.get('SALE_PRICE',{price:123456.78});//Thepriceis$123,456.78显示日期的语法同上：{variablename,type,format}，当type为“date”时，format有以下选项：short,medium,long,full,或不格式{"SALE_START":"Salebegins{start,date}","SALE_END":"Saleends{end,date,long}"}参考和显示：intl.get('SALE_START',{start:new日期（）}）;//促销开始于4/19/2017intl.get('SALE_END',{end:newDate()});//SaleendsApril19,2017遇到时配置默认消息例如，当资源包中的文本因拼写错误而无法匹配时，您可以提前配置默认消息。这时候资源包匹配不到的时候会显示默认的我。ssage//"defaultMessage()"可以简写为"d()"intl.get('not-exist-key').defaultMessage('Thissentencewasnotfound');同样，你也可以配置默认的html模板messageintl.getHTML('not-exist-key').d(Thissentencewasnotfound
)messageresourcebundlewithvariables中的配置如下遵循{“HELLO”：“你好，{name}。欢迎来到{where}！”}在html中引用时intl.get('HELLO',{name:'banana',where:'China'})
显示的结果是：你好，香蕉。欢迎来到中国！最后介绍了react-intl-universal的基本用法。如果以上不能满足你的需求，请到git阅读更多readme文档和api文档。git地址：https://github。com/alibaba/re...antd/antd-mobile国际化方案LocaleProvider国际化组件LocaleProvider用于全局配置国际化文案https://ant.design/components...为组件内置文案提供统一国际化支持使用LocaleProvider来使用React的context特性，只需要在应用周围包裹一次即可全局生效。import{LocaleProvider}from'antd';importzh_CNfrom'antd/lib/locale-provider/zh_CN';importmomentfrom'moment';import'moment/locale/zh-cn';moment.locale('zh-cn');...返回;提供英文、中文、俄文、法文、德文等多种语言支持，所有语言包都可以在这里找到。注意：如果需要使用UMD版本的dist文件，需要导入antd/dist/antd-with-locales.js，同时导入moment对应的locale，然后使用如下：const{LocaleProvider,locales}=window.antd;...返回；今天的国际分享就到此结束，个人感觉react-intl-universal比较好用，如果对你有帮助的话记得关注。案例已上传至github。如果你有相关需求，可以去看看。有问题请指正！
