随着前端项目越来越复杂，多语言化也变得越来越必要。而其中一个必不可少的工具就是 gettext。而使用 webpack 打包的前端项目又通常会使用 babel，而 babel-extract-gettext 就是一个可以将 gettext 相关的信息提取出来的 babel 插件。
安装
使用 npm 进行安装：
npm install babel-extract-gettext --save-dev
同时也需要安装 gettext:
npm install gettext --save
配置
在 babel 的配置文件中添加以下内容：
-- -------------------- ---- -------
-
---------- -
------------------- -
---------------- -
-------- --------- -----
--------------- ---------------- -----
---------- ----------- ----
-
--
-
-其中，functionNames 指定了 gettext 相关函数的名称及别名，如果使用不同的名称，需要进行相应修改。
使用
使用 babel-cli 运行：
babel-cli --presets es2015 myfile.js -o myfile.es5.js
会在 myfile.es5.js 文件中自动将 gettext 相关信息提取出来，生成 .pot 文件。
在运行 gettext 相关工具之前，需要添加如下的代码：
import gettext from 'gettext'; gettext(); // 进行初始化
此后，使用 gettext的相关函数即可实现多语言化。
示例代码
我们以一个简单的 React 组件为例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ----------
----- ------- - -- -- -
----- -------- - --------------- ---------
------ -
---------------------
--
--运行 babel-cli 后生成的 .pot 文件：
#: input.jsx:4 msgid "Hello, world!" msgstr ""
我们可以使用 gettext 相关工具将其翻译为其他语言，然后在使用时根据用户所选的语言进行相应的加载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601681e8991b448de2dc