在现代的网站和 Web 应用程序中，多语言支持已成为必不可少的功能。随着用户群体的不断扩大和多元化，开发人员需要使用不同的语言来满足不同用户的需求。然而，在多语言应用程序中，本地化和翻译管理变得非常困难。Babel 是一个流行的 JavaScript 编译器，是开发人员的首选工具之一。在本文中，将介绍如何使用 Babel 7 i18n 扩展来转换静态应用程序中的翻译文本。
Babel 7 i18n
Babel 7 i18n 是一个 Babel 插件，可以将静态文件中的翻译文本提取为易于翻译的文本资源。它使用 React Intl 库以及一些其他插件来提供本地化和国际化支持。
安装
在项目中安装 Babel 7 和 Babel i18n 插件：
$ npm install @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/preset-react babel-plugin-formatjs --save-dev
安装后，配置 .babelrc 文件：
-- -------------------- ---- -------
-
---------- --------------------- -----------------------
---------- -
----------------------------------
--------------------------------------
-----------------------------------
------------ -
------------------------- --------------------------------
------ ----
--
-
-配置
Babel i18n 需要一个配置文件来设置翻译的规则和目标语言。我们可以在根目录下创建一个名为 .i18nrc 的文件，内容如下：
-- -------------------- ---- -------
-
---------- -
-
------- --------
-------------- -----------------------
------------------- ---------------------------
--
-
------- --------
-------------- -----------------------
------------------- ---------------------------
-
-
-上述配置描述了两个目标语言：英语（美国）和中文（中国）。每个语言都有一个 messagesDir 和 translationsFile 属性。这些属性告诉 Babel i18n 在哪里查找翻译文本并将其输出到哪个文件中。
编译和提取
接下来，运行以下命令来提取翻译字符串，并生成转换后的文件：
$ npx babel src --out-dir dist --extensions ".js,.jsx" \ --no-babelrc --ignore "src/**/__tests__" --ignore "src/**/*.test.js" \ --no-comments --no-generate-ast --no-source-maps \ --plugins=babel-plugin-formatjs
上述命令使用 Babel i18n 插件来提取翻译文本，并将其输出到指定的目录中（此处为 ./translations 目录）。生成的文件将根据配置中指定的语言命名，并包含所有提取的翻译字符串。这些文件应该由翻译人员进行翻译，完成后，我们将这些翻译合并回应用程序中。
显示翻译文本
在 React 中，使用 FormattedMessage 组件来输出翻译文本。在组件中，可以按以下方式使用 FormattedMessage：
-- -------------------- ---- -------
------ - ---------------- - ---- -------------
----- ----------- - -- -- -
------ -
-----
----------------- --------------- ---------------------- ------- --
------
--
--在上面的代码中，FormattedMessage 组件使用属性 id 来查找翻译文本，使用 defaultMessage 属性作为默认文本（在没有找到翻译时显示的字符串）。
完整示例
下面是一个完整的示例，展示如何使用 Babel 7 i18n 在 React 应用程序中使用翻译文本：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- ---------------- - ---- -------------
----- -------- - -
------------- ------- --------
--
----- --- - -- -- -
------ -
------------- ----------- --------------------
-----
----------------- --------------- ---------------------- ------- --
------
---------------
--
--
-------------------- --- ---------------------------------在上面的代码中，我们使用 IntlProvider 组件将应用程序的语言设置为英语，并将翻译文本传递给 FormattedMessage 组件以显示翻译文本。
总结
在本文中，我们介绍了如何使用 Babel 7 i18n 扩展来提取静态应用程序中的翻译文本。我们讨论了如何安装和配置 Babel i18n 插件，并提供了完整的示例代码。使用 Babel 7 i18n，您可以轻松地为您的应用程序添加多语言支持，并使其更易于管理和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64582329968c7c53b0a9617a