在前端开发中，国际化是一个不可忽视的问题。@boost/translate 是一款使用简便的 Node.js 包，可以方便的实现前端页面的国际化。
安装
使用 npm 安装 @boost/translate：
npm install @boost/translate --save
使用方法
初始化
在程序中使用时，需要先进行初始化。@boost/translate 支持多种初始化方式，本文以简单方式为例：
const { Translate } = require('@boost/translate'); const translator = new Translate();
添加语言资源
在进行翻译之前，我们先需要添加语言资源。如下所示，我们添加了两种语言：
-- -------------------- ---- ------- ---------------------------- - -------- -------- -- -- --------- ------ ------ ---- -------- -------- --- --- ------------------------------- - -------- ----------- ------ ------- -------- ------ ---展开代码
翻译
接下来，我们就可以对需要翻译的文本进行操作：
console.log(translator.translate('welcome')); // 'Welcome to My Website' console.log(translator.translate('about', 'zh-CN')); // '关于我们'
动态翻译
如果我们需要动态添加语言资源，可以通过 translator.addResource() 方法进行添加。例如，我们在用户登录后获取了用户选择的语言，我们就可以动态添加对应的语言资源：
const language = getUserSelectedLanguage(); const resource = getLanguageResource(language); translator.addResource(language, resource);
字符串格式化
有些时候，我们需要在翻译时将某些参数传入。这时可以通过字符串格式化进行实现：
const name = 'John'; const message = translator.translate('welcomeToName', { name }); console.log(message); // 'Welcome to John'
其中，welcomeToName 为需要翻译的文本，{ name } 表示参数。
React 整合
对于使用 React 开发的项目，可以将翻译工具类作为一个组件进行封装。
-- -------------------- ---- ------- ------ - --------- - ---- ------------------- ----- ---------- - --- ------------ ---------------------------- - ----- ------ --- ------------------------------- - ----- ---- --- ----- ----------- - -- --- ---- -- -- - ------ - ------------------------------ ------------ -- --展开代码
这样就非常方便了使用国际化组件了：
<Translation id="name" lang="en" /> // John <Translation id="name" lang="zh-CN" /> // 张三
总结
@boost/translate 可以让前端开发实现简单的国际化。在使用时，需要进行初始化、添加语言资源以及配置参数等操作。对于 React 项目，可以将翻译组件进行封装，提供更友好的使用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/boost-the-translate
