最近，一位名为 Johnny Pota 的前端开发者开源了一个名为 @johnnypota/tran-toolkit 的 npm 包，这个包提供了一系列的翻译工具，可以帮助前端开发者更方便地处理多语言翻译的问题。本篇文章将详细介绍这个 npm 包的使用方法，包括安装、配置、使用以及常见问题的解决方法，并提供示例代码，希望可以帮助到需要的读者。
安装
首先，我们需要在本地安装 @johnnypota/tran-toolkit 这个 npm 包。可以使用以下命令来安装：
npm install --save-dev @johnnypota/tran-toolkit
添加 --save-dev 参数是因为这个工具包是一个开发依赖，只在开发阶段使用。如果你需要在生产环境中使用这个包，可以去掉这个参数。
配置
配置 @johnnypota/tran-toolkit 可以很方便地统一管理多语言配置，提高开发效率。在项目的根目录下创建 tran.config.js 文件，然后在文件中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-------- -
--- -
----- ----------
--
--- -
----- ----------
--
--
-------------- -----
---------- ----------
--这个配置文件中定义了两种语言：英语和中文，分别对应了 en.json 和 zh.json 两个文件。defaultLocale 定义了默认语言。outputDir 定义了翻译文件的输出目录。
使用
在上述配置完成后，我们可以使用 @johnnypota/tran-toolkit 提供的命令来完成多语言处理的任务。首先，我们需要在 package.json 文件中添加以下脚本：
"scripts": {
"translate": "tran"
}这个脚本将会在我们运行 npm run translate 命令时，执行 tran 命令，也就是 @johnnypota/tran-toolkit 提供的命令。
接下来，我们可以在项目中编写对应语言的 JSON 文件，例如：
// en.json
{
"hello": "Hello",
"world": "World"
}// zh.json
{
"hello": "你好",
"world": "世界"
}然后，我们就可以使用以下命令来生成翻译文件：
npm run translate
这个命令会自动将项目中的字符串提取出来，然后翻译成目标语言，并生成对应的 JSON 文件，存放在 locales 目录下。
接下来，我们可以在项目中使用这个翻译工具包。例如，使用 React 进行开发，在渲染组件时，使用 translate 函数来获取翻译后的字符串：
-- -------------------- ---- -------
------ - --------- - ---- ---------------------------
------ ------- -------- ----- -
------ -
-----
--------------------- ---------------------
------
--
-这个函数会根据当前语言，自动选择对应的翻译字符串。
常见问题
如何添加新的语言？
在 tran.config.js 文件中添加新的语言即可。例如，如果你要添加法语，可以这样配置：
-- -------------------- ---- -------
-------------- - -
-------- -
--- -
----- ----------
--
--- -
----- ----------
--
--- -
----- ----------
--
--
-------------- -----
---------- ----------
--然后在项目根目录下创建 fr.json 文件，然后运行 npm run translate 即可。
翻译的字符串没有被提取出来？
请确保在项目中正确地使用了字符串。例如，下面的例子中，使用了一个字符串，但是这个字符串没有被正确地使用，会导致提取不出来：
const str = 'hello'; console.log(`str`);
这个例子中，应该是 console.log(str) 才能正确地提取出字符串。
结语
@johnnypota/tran-toolkit 是一个非常好用的翻译工具包，可以帮助我们更方便地处理多语言问题。希望本篇文章能够帮助到需要的读者，如果有任何问题，欢迎在评论中留言，我们会及时回复。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff481e8991b448ddc10