npm 包 broccoli-ember-i18n-precompile 使用教程

阅读时长 4 分钟读完

在前端开发中,多语言是一个常见需求。broccoli-ember-i18n-precompile 是一个能够处理 Ember 应用的本地化文件的 npm 包,可以很好地解决国际化的问题。

本篇文章将为大家介绍如何使用 broccoli-ember-i18n-precompile,详细讲述其使用和配置方法,同时提供示例代码以供参考。

什么是 broccoli-ember-i18n-precompile?

broccoli-ember-i18n-precompile 是一个对直接源码进行翻译的 Ember I18N 前置处理器。通过该工具,我们可以通过配置 files 和 input 字段来将所有的 I18n.t 告知翻译结果,并在编译之前为所有的翻译结果生成一个 JavaScript 对象。这个对象可以是直接放在 <head> 中,也可以在载入 Ember 时异步载入。

如何安装 broccoli-ember-i18n-precompile?

安装 broccoli-ember-i18n-precompile 很简单,只需要在命令行中输入如下命令即可:

如何配置 broccoli-ember-i18n-precompile?

broccoli-ember-i18n-precompile 工具配置简单,只需要在 Brocfile.js 文件中进行配置即可。首先,需要使用 broccoli-ember-i18n-precompile 的 precompile 方法生成 JavaScript 对象,然后通过 broccoli-concat 在编译时将代码打包成一个 JS 文件。

示例代码如下:

-- -------------------- ---- -------
--- ------------- - -----------------------------------------------------
--- ------ - ---------------------------

--- --------- - --------------------------

--------- - ----------------- -
  ----------- ------------
  ----------- -----------------
---

例如以上代码,i18nFiles 会生成一个 JavaScript 对象,用于在 Ember 事件中调用翻译文本。inputFiles 设置为读取 app/i18n 下所有的 .js 文件作为输入,outputFile 则设置为生成的文件名和文件路径,输出在 assets/i18n.js

如何在代码中使用 broccoli-ember-i18n-precompile?

下面为大家演示如何在代码中调用 broccoli-ember-i18n-precompile 生成的 JavaScript 对象。

添加翻译文件

在 Ember 的代码中,所有的本地化字符串都在一个 key-value 对象中存储,例如:

app/i18n 目录下,我们可以添加翻译文件,例如 zh-CN.js,里面存储了中文本地化字符串的 key-value 对象:

在代码中调用

在代码中调用之前,我们需要在在.html 文件的头部加入 i18n.js 文件:

-- -------------------- ---- -------
--------- -----
------
  ------
    ------- ------------------------------
    ----- ----------------
    --------------------
  -------
  ------
    ---
  -------
-------

在代码中调用时,只需要用 I18n.t('some.key') 就可以获取翻译结果了。

总结

本文介绍了如何使用 broccoli-ember-i18n-precompile,详情请参阅官方文档。通过使用这个工具,我们可以在 Ember 应用中通过配置 files 和 input 字段将所有的 I18n.t 告知翻译结果,并在编译之前为所有的翻译结果生成一个 JavaScript 对象。自此,我们在开发过程中就可以很方便地处理多语言问题了。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde5312

纠错
反馈