npm 包 i18n-extractor 使用教程

简介

i18n-extractor 是一个用于提取 JavaScript 代码中的国际化文本的 npm 包。它可以自动扫描代码,并将代码中用到的文本提取出来生成一个翻译文件,方便后续的多语言翻译工作。

本文将详细介绍 i18n-extractor 的使用方法,并附带一个示例代码作为演示。

安装

首先,你需要在项目中安装 i18n-extractor:

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

配置文件

i18n-extractor 支持使用配置文件来配置其行为。配置文件的默认文件名为 .i18nrc,但你也可以通过命令行参数来指定其他的配置文件。

以下是一个示例配置文件 .i18nrc

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

其中包含了以下配置项:

  • locales: 一个字符串数组,列出了所有可用的语言代码。这些语言代码将被用于生成对应的翻译文件。
  • output: 翻译文件的输出路径,可以使用 {locale} 占位符指定语言代码。
  • input: 待扫描的代码路径,支持 glob 格式。
  • marker: 标识用于打上待翻译文本的标记字符串,默认为 i18n
  • functionNames: 一个对象,用于指定识别哪些函数作为文本提取器,以及这些函数在 JS 代码中的名称。对象的键名应该是函数类型(如 "translate""plural""select" 等),键值应该是一个字符串数组,列出了所有可能的 JS 函数名称。
  • jsxAttributeNames: 一个对象,用于指定识别哪些 JSX 属性作为文本提取器,以及这些属性在 JSX 代码中的名称。对象的键名应该是函数类型(如 "translate""plural""select" 等),键值应该是一个字符串数组,列出了所有可能的 JSX 属性名称。
  • extensions: 待扫描的文件扩展名,如 ".js"".jsx"

使用方法

在项目的根目录下运行以下命令来提取所有待翻译文本:

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

此时,i18n-extractor 将会扫描指定的代码路径,并提取出其中的待翻译文本,然后将其保存到输出路径中的翻译文件中。

生成的翻译文件格式如下:

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

而源代码中的待翻译文本,则通过 marker 标记被注释掉:

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

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

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

示例代码

以下是一个演示用的 React 代码,其中包含了多种可翻译的文本:

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

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

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

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

运行 i18n-extractor,它会将所有可翻译的文本提取出来,生成一个翻译文件,其中包含了如下内容:

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

随着项目中可翻译文本的不断增多,i18n-extractor 能够帮助我们快速、准确地提取这些文本并交由翻译人员进行翻译。同时,它的配置参数也让我们能够更加灵活地进行提取,以应对不同的代码场景。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/77006


猜你喜欢

  • npm 包 move-panta 使用教程

    前言 在 web 开发中,我们经常需要操作 HTML 元素实现一些动画效果。而其中一个常见的需求就是让元素沿着一条预设路径运动。而对于这个需求,move-panta 就提供了一个好用的解决方案。

    5 年前
  • NPM包templatify使用教程

    当你需要生成大量文档或者代码时,使用模板来快速生成基础代码和文档非常有效。templatify是一个强大的npm包,它支持许多生产模板的功能,本文将介绍templatify的使用方法和一些示例代码。

    5 年前
  • npm包 whet.extend 使用教程

    1. 什么是npm包 npm(Node Package Manager)是Node.js默认的包管理工具,能够集成地搜索、安装和管理Node.js的包和依赖项。Node.js包是指一个或一组具有相互依...

    5 年前
  • npm 包 **plata** 使用教程

    难道你还在每次开发新项目时为选色烦恼吗?不会设计的前端程序员不用愁,npm 包 plata 来帮你解决这个难题。 什么是 plata plata 是一个基于 Material Design 的颜色...

    5 年前
  • npm 包 plog 使用教程

    plog 是一个简单易用的 npm 包,它使得在代码中插入日志变得快速而方便。在前端开发中,调试是非常关键的一步,plog 可以帮助我们更好地理解代码执行过程并定位问题。

    5 年前
  • npm 包 handlebars-runtime 使用教程

    简介 Handlebars 是一个 JavaScript 模板库,用于创建动态 HTML。使用 Handlebars ,可以方便地组合变量和模板,创建出美观的用户界面。

    5 年前
  • NPM 包 Mott 使用教程

    Mott 是一个可重复使用的 React 表格组件,它提供了丰富和灵活的表格渲染方式和配置。在本文中,我们将教你如何使用 Mott 并探索其深度和学习实践。 安装 要使用 Mott,请在项目中使用 n...

    5 年前
  • npm包ng-annotate-uglify-js-brunch的使用教程

    在前端开发过程中,我们经常需要对代码进行打包和压缩,以优化加载速度和提升用户体验。而ng-annotate-uglify-js-brunch是一款实用的npm包,可以帮助我们实现这一目标。

    5 年前
  • npm 包 nap 使用教程

    前言 在前端开发中,我们经常需要使用一些第三方的库或工具,而 npm 是一个非常流行的包管理器,它允许我们轻松地从在线仓库中下载各种各样的包。在这篇文章中,我将为大家介绍一个名为 nap 的 npm ...

    5 年前
  • npm 包 core.js 使用教程

    什么是 core.js Core.js 是一个包含 ECMAScript 标准库的 npm 包。它的目标是为所有的 JavaScript 环境提供一致的 ECMA-262 标准的实现。

    5 年前
  • npm 包 neat 的使用教程

    在前端开发中,常常需要使用一些 CSS 辅助工具来快速实现布局和样式调整。其中,一种非常实用的工具就是 neat。 neat 是 SASS 的一系列 mixin 和函数,能够帮助我们快速实现网格布局、...

    5 年前
  • npm 包 facebook-js 使用教程

    facebook-js 是基于 Facebook 的 JavaScript SDK 开发的一个 npm 包,可以帮助开发者在 Web 应用中更方便地使用 Facebook 的功能,如登录、分享、点赞等...

    5 年前
  • npm包json-stream-splitter使用教程

    介绍 在前端开发的过程中,我们经常会需要处理JSON文件。然而,JSON文件的大小可能会很大,处理起来会很麻烦,这时候我们需要一个解决方案,来帮助我们更加高效地处理JSON文件。

    5 年前
  • npm 包 flickr-js 使用教程

    在前端开发中,我们常常会使用一些第三方库来实现一些功能,在这些库中,npm 包是常见的一种形式。本文介绍的 npm 包 flickr-js,是一个可以使用 flickr API 的轻量级 JavaSc...

    5 年前
  • npm 包 gdata-js 使用教程

    作为前端开发者,我们常常需要在网站的各个环节中使用 Google 数据服务。但是,如何快速、有效地使用 API 获取我们所需要的数据呢?这时候, gdata-js 包就能帮我们实现这个需求。

    5 年前
  • npm 包 minreq 使用教程

    前言 在前端开发中,发送请求是一个经常用到的功能,而使用现成的库可以减轻我们的工作量,提高开发效率。其中一个比较轻量级的 npm 包就是 minreq,它可以轻松方便地在前端发送 HTTP 请求。

    5 年前
  • npm 包 readabilitySAX 使用教程

    随着互联网的发展,我们可以在网上获取到丰富的信息。但是,有些网站的阅读体验很差,很难阅读。这时候,我们可以使用 readabilitySAX 这个 npm 包来提高阅读体验。

    5 年前
  • npm 包 node-fakeweb 使用教程

    前言 在前端开发中,我们经常会遇到需要模拟后端响应的场景。而在开发过程中,我们常常需要依赖于一些第三方库提供的接口,例如 Google Maps 需要从 Google 服务器获取数据,而我们又无法直接...

    5 年前
  • npm包Airbrake使用教程

    简介 Airbrake是一个用于监控和报告Web应用程序错误的服务。它会自动地捕捉前端、后端及其他语言的错误,并提供实时错误监控和异常通知。本文将向读者介绍如何在前端项目中使用Airbrake。

    5 年前
  • npm 包 sqlite-fts 使用教程

    在前端开发中,数据的存储和查询是非常重要的,而 SQLite 是一个轻量级的数据库引擎,其全文搜索能力也十分强大,现在我们介绍使用 npm 包 sqlite-fts 进行全文搜索的使用教程。

    5 年前

相关推荐

    暂无文章