在前端开发中,多语言是一个常见需求。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 很简单,只需要在命令行中输入如下命令即可:
npm install broccoli-ember-i18n-precompile --save-dev
如何配置 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 对象中存储,例如:
import Ember from 'ember'; import translations from 'ember-i18n/translations'; export default Ember.Controller.extend({ someKey: translations['some.key'] });
在 app/i18n
目录下,我们可以添加翻译文件,例如 zh-CN.js
,里面存储了中文本地化字符串的 key-value 对象:
export default { 'some.key': '这是中文翻译', }
在代码中调用
在代码中调用之前,我们需要在在.html 文件的头部加入 i18n.js 文件:
-- -------------------- ---- ------- --------- ----- ------ ------ ------- ------------------------------ ----- ---------------- -------------------- ------- ------ --- ------- -------
在代码中调用时,只需要用 I18n.t('some.key') 就可以获取翻译结果了。
import Ember from 'ember'; import translations from 'ember-i18n/translations'; export default Ember.Controller.extend({ someKey: I18n.t('some.key') });
总结
本文介绍了如何使用 broccoli-ember-i18n-precompile,详情请参阅官方文档。通过使用这个工具,我们可以在 Ember 应用中通过配置 files 和 input 字段将所有的 I18n.t
告知翻译结果,并在编译之前为所有的翻译结果生成一个 JavaScript 对象。自此,我们在开发过程中就可以很方便地处理多语言问题了。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde5312