npm 包 @ember-intl/grunt-extract-cldr-data 使用教程

阅读时长 5 分钟读完

在前端开发中,国际化是非常重要的一项工作。而在实现国际化方面,本地化是其中的一个必不可少的环节。而本地化需要用到各种语言和地区相关的数据,如货币符号、日期格式、数值格式等等。这些数据可以通过 CLDR(Common Locale Data Repository)获取到。在 Ember.js 中,可以通过 @ember-intl/grunt-extract-cldr-data 这个 npm 包来处理 CLDR 数据,并将其转换为 JSON 格式,以便在应用程序中使用。

安装

首先需要在项目中安装 @ember-intl/grunt-extract-cldr-data:

同时也需要安装 grunt,如果项目中还未安装的话:

配置

接下来需要在项目根目录下创建一个 Gruntfile.js 文件来配置 grunt 的任务。Gruntfile.js 的具体内容请参考 @ember-intl/grunt-extract-cldr-data#usage

在 Gruntfile.js 中,需要定义两个任务:extract-cldr-datamerge-cldr-data。其中 extract-cldr-data 用于从 CLDR 中提取数据,merge-cldr-data 用于将提取的数据合并入已有的翻译文件中(如果存在的话)。

下面是一个示例的 Gruntfile.js 文件内容:

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

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

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

上面的配置定义了两个任务:extract-cldr-datamerge-cldr-data。其中 extract-cldr-data 用于从 CLDR 中提取数据,生成 JSON 文件,并保存在 public/translations/ 目录下。merge-cldr-data 用于将 public/translations/ 目录下所有 JSON 文件中的内容合并,并生成一个 translations.json 文件(文件名可以自定义),保存在同一目录下。

grunt-extract-cldr-data 任务的配置中,locales 属性用于指定需要提取数据的语言和地区,dest 属性用于指定生成的 JSON 文件的目录,targetLocaleDataFile 属性用于指定生成的 JSON 文件的文件名格式(例如:en-us-58b369c155d11fa78c0456f8093546a9.json)。 grunt-merge-cldr-data 任务只需要指定 src 属性就可以了。

使用

在上面的配置中,我们定义了 i18n 任务,所以可以通过 grunt 命令来执行。

执行完毕后,就可以在 public/translations/ 目录下看到生成的 JSON 文件了。在应用程序中使用这些文件,可以使用如下的代码:

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

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

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

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

上面的代码会在控制台中显示如下内容:

总结

@ember-intl/grunt-extract-cldr-data 封装了 CLDR 数据的提取和转换过程,使用起来非常方便。只需要配置一下 grunt 任务,就可以将 CLDR 数据转换为 JSON 文件,然后在应用程序中使用即可。同时,这也是一个简单但非常实用的国际化本地化解决方案,可以为项目的多语言支持提供便利。

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

纠错
反馈