npm 包 phrase-engine 使用教程

简介

在前端开发中，一些多语言的网站或应用需要不同的语言翻译，而这些翻译内容通常可通过国际化（i18n）解决。要实现国际化，我们需要一个字符串翻译工具，这时候就可以使用 npm 包 phrase-engine。

安装

首先，在你的项目中安装 phrase-engine。可以通过 npm 命令进行安装：

npm install phrase-engine

安装完成后，在页面中引入此库：

import phrase from 'phrase-engine';

使用

初始化

在开始使用 phrase-engine 之前，需要先进行初始化。其中需要提供三个参数：API key、project id 和 source language。

const options = {
    apiKey: 'YOUR_API_KEY',
    projectId: 'YOUR_PROJECT_ID',
    sourceLocaleId: 'en'
};

phrase.init(options);

翻译文本

初始化完成后，可以调用 phrase.t() 来翻译文本。

const translatedText = phrase.t('Hello, world!');

可以直接获取到翻译后的文本，如果翻译失败（比如没有找到相应的翻译内容），则返回原始文本。

多个语言

phrase-engine 允许同时支持多个语言。可以在初始化时传入所需的语言编码。

const options = {
    apiKey: 'YOUR_API_KEY',
    projectId: 'YOUR_PROJECT_ID',
    sourceLocaleId: 'en',
    targetLocaleIds: ['zh-Hans', 'zh-Hant']
};

phrase.init(options);

这样就可以支持简体中文和繁体中文两种语言。在翻译文本时，通过传入所需的语言编码来获取对应的翻译内容。

const simplifiedText = phrase.t('Hello, world!', 'zh-Hans');
const traditionalText = phrase.t('Hello, world!', 'zh-Hant');

动态文本

当需要翻译的文本内容为动态生成时，可以使用占位符 ${} 来替代其中的变量。

const userName = 'John';
const translatedText = phrase.t(`Hello, ${userName}!`);

当然，需要在 phrase-engine 的管理后台中预设这些变量的翻译值，比如:

这样，当 userName 的值为 "John" 时，翻译后的文本为 "你好，John！"。

React 组件

在 React 项目中，我们可以使用包装过的 PhraseProvider 和 t 来翻译组件内的文本。

首先，在入口文件中进行 provider 代理的初始设置：

-- -------------------- ---- -------
------ - -------------- - ---- ----------------

----- ------- - -
    ------- ---------------
    ---------- ------------------
    --------------- ----
--

----------------
    --------------- ------------------
        ---- --
    ------------------
    -------------------------------
--
展开代码

接着，在组件中引入 usePhrase 并使用 t 翻译需要翻译的文本。

import { usePhrase } from 'phrase-engine';

const ExampleComponent = () => {
    const { t } = usePhrase();
    return <p>{t('Hello, world!')}</p>;
}

总结

通过使用 phrase-engine，我们可以在前端项目中实现方便的多语言翻译功能。除了上述介绍的使用方式，还有更加高级的应用，如翻译 vue.js 模板、预翻译等。希望本文能够帮助到大家，开发出更加友好的多语言应用。

样例代码详见： https://github.com/PhraseApp-Blog/phrase-node-demo/blob/master/index.js。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607181e8991b448de982