在现代Web应用程序中，多语言支持是一个必不可少的功能。i18n是指“国际化”（internationalization）和“本地化”（localization）的缩写。国际化是指将应用程序设计为可以轻松支持多种语言和文化的能力；而本地化则是将应用程序针对特定地区和语言进行适应和翻译。在前端开发中，@atlaskit/i18n-tools这个npm包是一个非常强大的国际化工具。
安装和导入
使用npm包管理工具，可以通过一条简单的命令将@atlaskit/i18n-tools包安装到你的应用程序中：
npm install @atlaskit/i18n-tools --save
接下来，我们需要将其导入到我们的代码中：
import { extractMessages } from '@atlaskit/i18n-tools';提取消息
extractMessages函数是这个npm包的重要功能之一。可以使用它来从 JavaScript 和 TypeScript 文件中提取所有国际化消息。 这使得你可以将这些消息转化成Po格式的字符串，方便进行翻译。
以下是提取消息的基本操作步骤：
const fs = require('fs');
const messages = extractMessages(fs.readFileSync(filePath));在此代码中，extractMessages需要读取一个文件的内容，然后返回该文件中所有的国际化消息。filePath是一个指向要提取消息的文件的路径名或文件描述符。
如果你的应用程序中使用的是React组件，可以通过以下代码提取消息：
import { defineMessages } from '@atlaskit/i18n-tools';
const messages = defineMessages({
greeting: {
id: 'my.component.greeting',
defaultMessage: 'Hello {name}!',
},
});这里，defineMessages函数是用于提供国际化消息的工具。 greeting是一个消息键（message key），它对应于应用程序中 my.component.greeting这个标识符，这个标识符唯一地标识了该消息。由于消息是在运行时才被解析的，所以默认消息文本被称为“默认消息”。在上面的示例中，“默认消息”是“Hello {name}!”，{name}是一个变量，可以根据实际情况进行更改。
当然，还可以将多个消息组织为一个单独的JavaScript模块，以便稍后提取。这里是一个javascript模块示例：
-- -------------------- ---- -------
------ - -------------- - ---- -----------------------
----- -------- - ----------------
--------- -
--- ------------------------
--------------- ------ ---------
--
---
------ ------- ---------在这个模块中，所有的消息都被封装在了messages对象中，并导出以供其他模块使用。
将消息转成po文件
消息提取完成后，你需要将这些消息转换成po格式的文件。接下来的示例代码演示了如何使用npm包node-po2json将提取出的消息文件转换成po文件：
const fs = require('fs');
const { po } = require('node-po2json')
const messages = extractMessages(fs.readFileSync(filePath));
fs.writeFileSync('i18n/messages.pot', po(messages).toString())代码中，messages变量是在之前章节中提取出来的国际化消息。po(messages).toString()是读取本地file.pot文件并将消息写入其中的代码。最后我们将该pot文件保存到项目的i18n文件夹中。
使用翻译后的消息
在成功地将提取出的消息转换成了po格式的翻译文件后，你还需要将其添加到你的应用程序中。以下是如何加载.po文件以及使用翻译后的消息：
import Polyglot from 'node-polyglot'
import { defaultLocale, locales} from './locales.json';
import messages from '../i18n/messages.pot';
const polyglot = new Polyglot({ defaultLocale, locale: `${navigator.language}` });
polyglot.extend(messages['default']);在此代码中，Polyglot是一个好用的翻译库，它可以将.po文件解析为可用的JavaScript对象。默认语言和目标语言也在代码中进行了指定。解析后的消息最后会通过 polyglot.extend()方法保存到polyglot中。
现在，我们就可以使用翻译后的消息了：
polyglot.t('my.component.greeting', { name: 'Jane' }); // Hello Jane!这里，t()方法被用于将消息翻译成当前的语言。 我们将 my.component.greeting 作为消息标识符进行了指定，同时还传递了 name变量。
总结
@atlaskit/i18n-tools这个npm包拥有非常强大的功能。使用它，我们可以方便地提取JavaScript中的国际化消息、将其保存为po格式的文件、并最终将其集成到我们的前端应用程序中。这些操作可以让我们轻松地实现Web应用程序的多语言支持，为用户提供更优秀的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f72e027a9b7065299ccbbe2