前言
在前端应用的国际化过程中，文案的管理一直是一个棘手的问题。传统的做法是在代码中使用字符串常量表示文案，然后在后端通过模板引擎等方式进行替换。这样的做法缺点显而易见：不便于前端的维护，也不便于翻译人员的协作。针对这个问题，一种新的解决方案出现了：使用格式化字符串来管理文案。
格式化字符串不仅可以表示文案的内容，还可以包含参数信息，例如：
const formatMessage = (name, count) => `Hello, ${name}! You have ${count} unread messages.`这样的字符串可以被翻译人员翻译，并在程序运行时替换参数。
但是，在大型项目中，使用格式化字符串的方式甚至都不够，我们还需要对文案进行提取以及国际化的打包。这个时候，就需要用到 babel-plugin-extract-format-message 这个 npm 包了。下面，我们就来具体介绍一下它的使用教程。
安装
首先，我们需要安装 babel-plugin-extract-format-message 这个 npm 包。可以使用 npm 或者 yarn 进行安装：
npm install --save-dev babel-plugin-extract-format-message # 或者 yarn add --dev babel-plugin-extract-format-message
在安装完成之后，我们需要配置 babel 以使用这个插件。在 .babelrc 或者 babel.config.js 中添加如下配置：
-- -------------------- ---- -------
-
---------- -
-------------------------- -
---------- --------- ---------
--------- ------------
-------------------- -----------------
------------------------ ----------------
--------------------------- --
--
-
-其中，各个配置项的含义如下：
locales：表示要提取哪些语言。这个值是一个数组，可以包含多个语言。output：表示提取出来的文案应该输出到哪个目录。这个值是一个字符串。defaultMessageKey：表示默认的文案键名，如果在代码中没有指定键名，那么就使用这个默认值。这个值是一个字符串。formatMessageFunction：表示格式化字符串的函数名。这个值是一个字符串。additionalComponentNames：表示要额外监听哪些组件。这个值是一个数组。
使用
在配置完成之后，我们就可以在代码中使用格式化字符串了。babel-plugin-extract-format-message 会自动提取这些格式化字符串并生成对应的 .json 文件。下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- -------
----- ------------- - ------ ------ -- ------- -------- --- ---- -------- ------ ----------
----- --- - -- -- -
----- ---- - ------
----- ----- - -
------ -
-----
--- ------------ ---- --- ---
----------------------- -----------
------
-
-
------ ------- ---在执行编译命令后，我们可以在 ./locales 目录下找到对应的 JSON 文件。它的格式如下：
{
"Hello, {name}! You have {count} unread messages.": {
"defaultMessage": "Hello, {name}! You have {count} unread messages.",
"zh-CN": "你好，{name}！你有 {count} 条未读消息。",
"en-US": "Hello, {name}! You have {count} unread messages."
}
}其中，"Hello, {name}! You have {count} unread messages." 就是该文案在代码中的值。"defaultMessage" 是默认的键名。"zh-CN" 是中文翻译，"en-US" 是英文翻译。
结语
通过上面的介绍，我们学习了如何使用 babel-plugin-extract-format-message 这个 npm 包来管理前端应用的格式化字符串。这个库不仅可以帮助我们提取文案，还可以进行国际化打包。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734b890c4f7277583798