npm 包 bem-i18n 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前端开发中，常常需要实现国际化和多语言支持。而 BEM 是一种流行的 CSS 架构模式，通过 bem-i18n 包，我们可以很方便地实现 BEM 类型的多语言支持。在本文中，我们将深入介绍如何使用 bem-i18n 包，包括安装、使用示例、自定义配置等。

安装

安装最新版 bem-i18n：

npm install --save bem-i18n

使用示例

假设我们在使用 BEM 模式进行开发，现在需要在 HTML 中使用多语言，并且需要考虑右到左 (RTL) 语言的支持。

首先，创建以下文件结构：

+ project/
|-- locales/
|   |-- en.js
|   |-- he.js
|-- index.html
|-- index.css
|-- index.js

其中 en.js 和 he.js 文件分别是英文和希伯来文的翻译文件。现在，我们先来看一下 en.js 文件的内容：

module.exports = {
  cancel: 'Cancel',
  save: 'Save',
};

然后，我们需要在 HTML 中使用 bem-i18n 包对多语言进行支持。

<div class="button">
  <button class="button__cancel translate" data-key="cancel"></button>
  <button class="button__save translate" data-key="save"></button>
</div>

在 CSS 中，我们需要为 rtl 样式添加前缀：

.button {
  direction: ltr;
}
.button__cancel.translate.rtl:before {
  content: '‮';
}

最后，在 JavaScript 中，我们需要引入 bem-i18n 包，然后进行配置和初始化：

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

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

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

做完以上这些工作，我们就可以在网页中看到多语言的效果了。

自定义配置

我们可以通过调用 i18n.config(...) 方法来自定义我们的 bem-i18n 配置。

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

其中：

lang: string：默认语言。
locales: Object：包含每种语言的翻译文件，key 为语言标识符。
defaultDirection: string：默认文本方向。
fallbackToLang: string：当使用的翻译文件不包含当前语言时，使用该语言进行回退。

总结

bem-i18n 包是实现 BEM 类型的多语言支持的一种好方法。通过对其配置和使用的学习，我们可以轻松获得国际化和多语言支持。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005542f81e8991b448d183d