随着前端项目越来越复杂，多语言化也变得越来越必要。而其中一个必不可少的工具就是 gettext。而使用 webpack 打包的前端项目又通常会使用 babel，而 babel-extract-gettext 就是一个可以将 gettext 相关的信息提取出来的 babel 插件。
安装
使用 npm 进行安装：
--- ------- --------------------- ----------
同时也需要安装 gettext:
--- ------- ------- ------
配置
在 babel 的配置文件中添加以下内容：
-
---------- -
------------------- -
---------------- -
-------- --------- -----
--------------- ---------------- -----
---------- ----------- ----
-
--
-
-其中，functionNames 指定了 gettext 相关函数的名称及别名，如果使用不同的名称，需要进行相应修改。
使用
使用 babel-cli 运行：
--------- --------- ------ --------- -- -------------
会在 myfile.es5.js 文件中自动将 gettext 相关信息提取出来，生成 .pot 文件。
在运行 gettext 相关工具之前，需要添加如下的代码：
------ ------- ---- ---------- ---------- -- -----
此后，使用 gettext的相关函数即可实现多语言化。
示例代码
我们以一个简单的 React 组件为例：
------ ----- ---- --------
------ ------- ---- ----------
----- ------- - -- -- -
----- -------- - --------------- ---------
------ -
---------------------
--
--运行 babel-cli 后生成的 .pot 文件：
-- ----------- ----- ------- ------- ------ --
我们可以使用 gettext 相关工具将其翻译为其他语言，然后在使用时根据用户所选的语言进行相应的加载。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601681e8991b448de2dc