npm包 babel-plugin-transform-format-message 使用教程

前言

在开发前端应用的过程中，我们编写多语言支持代码时，会遇到很多问题。而其中一个主要的问题是如何实现多语言的国际化。在这个过程中，大家应该使用过format-message库，是一个用于消息格式化的javascript库。而babel-plugin-transform-format-message 是一个Babel插件，它可以将格式化消息变成更快、更易读且不含垃圾代码的新代码。如果你正在考虑使用format-message库库时，这篇文章会对你有所帮助。

什么是 babel-plugin-transform-format-message ?

babel-plugin-transform-format-message 是一个Babel插件，它可以将格式化消息变成更快、更易读且不含垃圾代码的新代码。在使用format-message 前，建议先将其添加到 Babel 构建中，这样动态格式化的消息就可以按预期工作了。

为什么要使用 babel-plugin-transform-format-message ?

大多数组件需要输出文本，这些文本会被本地化以供国际化。在处理数百条消息时，使用所需的人力和时间将难以想象。相反，可以使用 JavaScript 格式化消息，自动本地化并自动切换本地化消息。借助新的格式化消息工具，我们可以大大减少后期本地化所需要的时间和人力成本。

babel-plugin-transform-format-message 就是为了解决上述问题而开发的。当你使用它时，基本不需要自己编写从 formatMessage 命令中导出的所有属性信息和关键字信息，它就自动帮你实现了。

基本使用

安装

首先，我们需要将babel-plugin-transform-format-message安装到我们的项目中。可以使用npm命令。

npm install --save-dev babel-plugin-transform-format-message

安装完成后，将该插件通过.babelrc加入到你的babel构建配置文件中即可。

{
  "plugins": [
    "transform-format-message"
  ]
}

这样我们就成功得激活了这个插件。

配置

现在我们已经激活了插件，接下来就是配置工作了。

首先，我们需要将格式化消息模板字符串转换成 formatMessage() 调用的AST。

import { formatMessage } from 'format-message';
formatMessage(`Hello ${name}!`);

该插件会将其转换成

import { formatMessage } from 'format-message';
formatMessage(_tmpl$0, [name]);
const _tmpl$0 = ['Hello ', '!'];

在上面的代码中，我们看到Hello ${name}!被包含在转换后的数组中，而${name}被替换为一个变量参考。此时通过调用formatMessage()函数便可以获取格式化后的信息了。

更多用法

该插件还有一个称为“解构”的特性。解构被用来处理复杂的情况，例如将键值对映射到formatMessage()函数，以便可以序列化它们，如下所示：

import { formatMessage } from 'format-message';
const messages = {
  hello: 'Hello, {name}!',
  goodbye: 'Goodbye, {name}!'
};
formatMessage(messages.hello, { name: 'Alice' });

插件将把这些调用解构成 formatMessage(...) ，其中一些参数代表 props ：

import { formatMessage } from 'format-message';
formatMessage(_tmpl$0, {
  name: 'Alice'
});
const _tmpl$0 = ['Hello, ', '!'];

上述代码已经被转换完成，我们可以继续使用formatMessage() 方法来获取格式化后的信息了。

完整示例

import { formatMessage } from 'format-message';
const messages = {
  hello: 'Hello, {name}!',
  goodbye: 'Goodbye, {name}!'
};
formatMessage(messages.hello, { name: 'Alice' });

我们可以看到，使用formatMessage时，将msg作为第一个参数传递，然后将需要格式化的值作为第二个参数传递。这两个参数的类型可以是字符串、数字、布尔值、JSX元素、对象、数组等。最后通过调用formatMessage() 方法获得格式化后的信息。

上述代码只是一个基本示例，通常我们会在大型项目中遇到许多消息格式化功能，如果你有更多的实际应用，可以考虑使用babel-plugin-transform-format-message模块。它可以大大提高你应用程序的本地化性和文本转换速度。

总结

babel-plugin-transform-format-message 是一款非常强大的多语言处理工具，他提供了简单且易用的API用于实现消息格式化功能。同时，该插件提供了对于解构表达式等复杂的本地化消息处理，可以帮助我们快速、准确地实现复杂的消息本地化。

希望这篇文章能够帮助你更好地了解babel-plugin-transform-format-message模块、格式化消息库和本地化消息的概念以及如何使用他们。在工作中遇到任何问题时，希望多思考、多排查，共同进步。

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