npm 包 @adlk/i18next-parser 使用教程

概述

i18n(Internationalization)是前端国际化的一种解决方案,可以方便管理多语言内容,并可以提供对应的翻译。i18next-parser 是一款基于 i18next 的国际化 parsing 工具。它可以在代码中自动解析出需要翻译的文本内容,并生成对应的翻译文件。本文介绍了如何使用 @adlk/i18next-parser 进行前端国际化。

安装

使用 npm 进行安装:

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

使用

1. 准备工作

首先需要在项目中引入 i18next 和 i18next-parser:

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

i18next 是国际化的核心库,i18next-fs-backend 是 i18next 的数据源,@adlk/i18next-parser 是国际化解析工具。

2. 配置

在 i18next 初始化时,需要对工具进行配置。以下是一个示例配置:

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

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

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

解析后的结果会自动生成到文件系统中。loadPath 中定义了语言文件的路径格式,将会通过 lng 和 ns 来解析。解析结果将被写入到 loadPath 所定义的路径。

3. 解析并翻译

使用 t 函数来翻译文本:

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

其中,key 是键名,在语言翻译文件中作为映射的 key。在 saveMissing option 开启的情况下,当解析操作发现的未知文本时,它将添加到 i18next 的 json 文件中,以便管理员可以在到位所需的文本之前查找并填写正确的翻译。

4. CLI Interface

还可以使用 i18next-parser 提供的命令行工具进行解析:

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

示例代码

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

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

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

总结

通过 i18next-parser 工具,可以更方便的管理前端国际化文件。在实际开发过程中,可以根据需要进行相关配置,并结合 i18next 核心库,达到前端国际化的目的。

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


猜你喜欢

  • npm 包 local-machine-network 使用教程

    在前端开发中,经常需要测试本地开发环境是否与其他设备或浏览器兼容。而进行这项操作的前提是需要保证所有设备处于同一局域网中。那么如何确保局域网中的设备能够互相连通呢?这就需要使用 npm 包 local...

    4 年前
  • npm 包 @buschtoens/ember-engines 使用教程

    前言 随着 Web 应用的复杂性不断增加,前端开发变得越来越艰巨。为了简化前端工程化,npm 包 @buschtoens/ember-engines 应运而生,它为你提供了一种组织大型前端应用的方式。

    4 年前
  • npm 包 @minna-ui/toast 使用教程

    简介 @minna-ui/toast 是一个简单易用的 toast 组件,可用于前端页面的提示信息展示。它支持丰富的配置选项,您可以根据需要自定义主题、布局、持续时间等。

    4 年前
  • npm 包 @minna-ui/code-view 使用教程

    前言 在开发网站时,我们经常需要在页面中嵌入一些代码,以便让用户更好地理解我们的功能或者示例。然而,大规模的代码展示往往导致代码排版不清晰,不美观。因此,@minna-ui/code-view 库应运...

    4 年前
  • npm 包 react-simple-gtm 使用教程

    前言 在前端开发中,我们经常需要对用户的行为进行追踪和分析。而 Google Analytics 是一款常用的网站统计工具,它能够帮助我们了解用户访问网站的情况以及用户行为等信息。

    4 年前
  • npm 包 @minna-ui/tabs 使用教程

    @minna-ui/tabs 是一个使用简便、功能完善的前端 UI 组件,在开发过程中经常被用作选项卡组件。本文将介绍如何通过 npm 安装、使用该组件,并提供详细的教程和示例代码。

    4 年前
  • NPM 包 @minna-ui/tslint-config 使用教程

    介绍 @minna-ui/tslint-config 是一个基于 TSLint 的规则集合,用于 TypeScript 项目的代码检查。该规则集合包含了一系列的 TypeScript 编程规范,可用于...

    4 年前
  • npm 包 log-writer-module 使用教程

    在现代 Web 应用的开发过程中,日志记录是一个不可或缺的部分。日志记录可以帮助我们快速定位问题,追溯错误,改善代码的可维护性和可读性。 在前端开发中,我们可以使用一些成熟的 npm 包来帮助我们实现...

    4 年前
  • npm 包 webpack-script-runner-plugin 使用教程

    在前端开发过程中,我们经常需要使用 webpack 构建我们的项目,并在本地进行开发和调试。而 webpack 的配置则是一个比较繁琐的过程,特别是在需要多次修改和测试的情况下,更是容易出错和耗时。

    4 年前
  • npm 包 tat-css 使用教程

    前言 在前端开发中,我们经常需要编写大量的 CSS 样式代码来实现页面效果。随着项目的规模增大,CSS 样式的维护变得越来越困难。为了解决这个问题,我们可以使用 CSS 预处理器来进行 CSS 样式的...

    4 年前
  • npm 包 babel-plugin-transform-nej-module 使用教程

    在前端开发中,我们常常会使用 NEJ 模块化框架来实现模块化开发。然而,NEJ 的语法并不兼容现代的 ES6 模块化,这给我们的前端开发带来了一些不便。为了解决这个问题,我们可以使用 npm 包 ba...

    4 年前
  • @pefish/js-utils 使用教程

    简介 @pefish/js-utils 是一个前端常用工具库,其中提供了大量的常用函数,能够帮助前端开发者快速地开发应用。 该工具库提供了一系列工具的实现,如:日期、字符串、数组、环境等等。

    4 年前
  • npm 包 @koumoul/nuxt-build-cache 使用教程

    前言 在前端项目开发中,频繁的构建和编译是一个很耗费时间和资源的过程。为了解决这个问题,@koumoul/nuxt-build-cache 应运而生。通过使用该 npm 包,我们可以将构建和编译过程中...

    4 年前
  • npm 包 paipctl 使用教程

    paipctl 是一个方便的命令行工具,可用于管理和部署基于 Kubernetes 的应用程序。它提供了一组功能强大的命令,可以大大简化与 Kubernetes 集群的交互操作,使部署和管理应用程序变...

    4 年前
  • npm 包 node-red-contrib-ppmp 使用教程

    随着物联网的发展,PPMP(Predictive Maintenance Modeling Platform)已经成为一个重要的标准,它可以帮助用户对设备进行监控,并进行预测性维护。

    4 年前
  • npm 包 flex-jsonp 使用教程

    介绍 flex-jsonp 是一个可用于在浏览器端进行 JSONP 请求的轻量级工具,它具有灵活的配置选项,可以轻松处理跨域请求。 JSONP (JSON with Padding),是一种跨域的技术...

    4 年前
  • npm 包 audio-tempo-changer.js 使用教程

    npm 包 audio-tempo-changer.js 使用教程 在前端开发中,音频处理是比较少见的需求,但是当我们需要应对音频播放速度的变化时,就需要使用到音频处理这个工具了。

    4 年前
  • NPM包Babel-preset-Mobile使用教程

    在现代前端开发中,为了兼容不同的浏览器和设备,代码需要进行转换和优化。为了达到这个目的,我们需要在项目中使用Babel这个工具来将我们的ES6+代码转化成在旧浏览器上也能运行的代码。

    4 年前
  • npm 包 react-native-horizontal-date-picker 使用教程

    React Native 是一个使用 JavaScript 构建 iOS 和 Android 应用程序的著名框架。对于大多数移动应用程序,日期选择器都是必要的部件,因此我们需要使用 npm 包来快速构...

    4 年前
  • nativescript-iqkeyboardmanager npm 包使用教程

    简介 nativescript-iqkeyboardmanager 是一个可以帮助开发人员在运行 Nativescript 应用程序时自动管理键盘的 npm 包。它可以让应用程序用户更方便地在输入框中...

    4 年前

相关推荐

    暂无文章