在前端开发中，国际化是一个不可忽视的问题。@boost/translate 是一款使用简便的 Node.js 包，可以方便的实现前端页面的国际化。
安装
使用 npm 安装 @boost/translate：
--- ------- ---------------- ------
使用方法
初始化
在程序中使用时，需要先进行初始化。@boost/translate 支持多种初始化方式，本文以简单方式为例：
----- - --------- - - ---------------------------- ----- ---------- - --- ------------
添加语言资源
在进行翻译之前，我们先需要添加语言资源。如下所示，我们添加了两种语言：
---------------------------- - -------- -------- -- -- --------- ------ ------ ---- -------- -------- --- --- ------------------------------- - -------- ----------- ------ ------- -------- ------ ---
翻译
接下来，我们就可以对需要翻译的文本进行操作：
--------------------------------------------- -- -------- -- -- -------- ----------------------------------------- ---------- -- ------
动态翻译
如果我们需要动态添加语言资源，可以通过 translator.addResource() 方法进行添加。例如，我们在用户登录后获取了用户选择的语言，我们就可以动态添加对应的语言资源：
----- -------- - -------------------------- ----- -------- - ------------------------------ -------------------------------- ----------
字符串格式化
有些时候，我们需要在翻译时将某些参数传入。这时可以通过字符串格式化进行实现：
----- ---- - ------- ----- ------- - ------------------------------------- - ---- --- --------------------- -- -------- -- -----
其中，welcomeToName 为需要翻译的文本，{ name } 表示参数。
React 整合
对于使用 React 开发的项目，可以将翻译工具类作为一个组件进行封装。
------ - --------- - ---- -------------------
----- ---------- - --- ------------
---------------------------- - ----- ------ ---
------------------------------- - ----- ---- ---
----- ----------- - -- --- ---- -- -- -
------ -
------------------------------ ------------
--
--这样就非常方便了使用国际化组件了：
------------ --------- --------- -- -- ---- ------------ --------- ------------ -- -- --
总结
@boost/translate 可以让前端开发实现简单的国际化。在使用时，需要进行初始化、添加语言资源以及配置参数等操作。对于 React 项目，可以将翻译组件进行封装，提供更友好的使用方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/boost-the-translate