前言
在实现多语言网站的过程中，我们经常会使用一个叫做 POEditor 的翻译管理平台。这个平台支持多种语言，可以方便地对网站中的各种文案进行管理和翻译。为了更加自动化地将 POEditor 中的翻译导入到代码中，我们可以使用一个叫做 grunt-poeditor-at 的 npm 包进行集成。
安装
在使用 grunt-poeditor-at 之前，你需要先安装 grunt 和 poeditor-api 这两个 npm 包。可以通过以下命令进行安装：
npm install grunt --save-dev npm install poeditor-api --save-dev npm install grunt-poeditor-at --save-dev
配置
首先，在项目的 Gruntfile.js 文件中添加以下代码：
grunt.loadNpmTasks('grunt-poeditor-at');接着，在 Gruntfile.js 中添加一个名为 poeditor 的配置项，示例如下：
-- -------------------- ---- -------
------------------
-- ---
--------- -
-------- -
--------- -----------------
---------- ---------------
--
------- -
-------- -
------- --------
-
--
------- -
-------- -
------- ---------
------- ---------
-
-
-
-- ---
---其中，apiToken 和 projectId 分别是你在 POEditor 中创建的 API token 和项目 ID。
grunt-poeditor-at 支持两个动作：update 和 export。update 动作会从 POEditor 中拉取最新的翻译，并将其更新到本地的翻译文件中；export 动作则会将本地的翻译文件导出为 POEditor 的语言包文件。
示例
接下来，我们以 update 动作为例来演示如何使用 grunt-poeditor-at 导入 POEditor 中的翻译。
首先，我们在 POEditor 中创建一个项目，并添加一些翻译。假设这个项目 ID 为 123456，API token 为 7890abcdefg。
接着，在项目的根目录中创建一个名为 locale.json 的文件，并添加以下内容：
-- -------------------- ---- -------
-
-------- -
-------- -----
-------- ----
--
-------- -
-------- --------
-------- -------
-
-其中，zh-CN 和 en-US 分别是两种语言的代码，hello 和 world 则是两个翻译的键名。
最后，在 Gruntfile.js 中添加以下配置：
-- -------------------- ---- -------
------------------
-- ---
--------- -
-------- -
--------- --------------
---------- ------
--
------- -
-------- -
------- --------
-
-
-
-- ---
---
---------------------------- ---------------------然后，运行以下命令：
grunt import
这会自动从 POEditor 中拉取最新的翻译，并将其更新到 locale.json 文件中。假如 POEditor 中翻译的值为：
-- -------------------- ---- -------
-
-------- -
-------- -----
-------- -----
------ ------
--
-------- -
-------- --------
-------- --------
------ ------- -------
-
-那么 locale.json 文件中的内容会自动更新为：
-- -------------------- ---- -------
-
-------- -
-------- -----
-------- -----
------ ------
--
-------- -
-------- --------
-------- --------
------ ------- -------
-
-从此以后，我们就可以愉快地在代码中使用这些翻译了：
import i18n from './locale.json'; console.log(i18n['zh-CN'].hello); // 输出：你好 console.log(i18n['en-US'].world); // 输出：World
结语
以上就是使用 grunt-poeditor-at 导入 POEditor 中的翻译的全部过程。通过自动化地将翻译导入到代码中，我们可以极大地提高开发效率，同时也避免了手动管理翻译带来的错误和繁琐。
希望这篇文章对你有所帮助，欢迎分享给更多的前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005737a81e8991b448e96b4