介绍
在前端开发中，我们经常需要用到国际化，即将网站内容翻译成多个不同的语言。而 onesky-webpack-plugin 是一个 npm 包，它可以帮助我们将网站中的文本提取出来，发送到 onesky 平台进行翻译，并将翻译好的文本合并回网站中，从而达到国际化的效果。
安装
使用 npm 安装 onesky-webpack-plugin：
npm install onesky-webpack-plugin --save-dev
配置
在 webpack 的配置文件中添加如下代码：
-- -------------------- ---- -------
----- ------------------- - ---------------------------------
-------------- - -
-- ---
-------- -
--- ---------------------
------- ---------------
------- --------------
---------- ------------------
---
--
--其中，apiKey，secret，projectId 都需要在 onesky 平台上注册帐号并创建项目后才能得到。
使用
在你的源代码中使用以下代码：
import { getTranslation } from 'onesky-webpack-plugin';
const translations = getTranslation('zh-CN');
console.log(translations['hello-world']);getTranslation 函数从 onesky 平台上下载对应语言的翻译并返回一个对象，其中的 key 对应着网站中需要翻译的文本，value 则对应着翻译后的文本。
示例
下面是一个完整的 webpack 配置文件：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------------- - ---------------------------------
-------------- - -
------ -
---- -----------------
--
----- --------------
------- -
--------- -------------------
----- --------- - --------
--
-------- -
--- ---------------------
------- ---------------
------- --------------
---------- ------------------
---
--- ----------------------
-------------- -
--------- ------------------------------
------------- ---------------
--------------------------------- -- --------
--
--
---
--
--
-------- ---------------------- -
----- ------------ - ------------------------------------------------
------
--
------ --------------
---
-
-------------- ------- --------
--
------------
--
-在你的源代码中使用以下代码：
console.log(process.env.TRANSLATIONS['hello-world']);
即可输出翻译后的文本。
总结
onesky-webpack-plugin 是一个非常方便的 npm 包，它可以帮助我们轻松实现国际化，从而更加方便地面向不同语言的用户提供服务。在使用中，需要注意 apiKey，secret，projectId 等参数的正确填写，以及文本的提取和合并等细节，但只要操作规范，就能够获得让人满意的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596581e8991b448d6e50