如果您一直在寻找一种方便的方法来处理BEM类和多语言设置在React项目开发中，那么你一定不会失望了。
在本文中，我们将介绍一款npm包，它可以很容易地通过添加一些配置来处理这两个问题，这个npm包就是react-app-rewire-bem-i18n-loader。
什么是 BEM 类？
BEM是一种CSS命名约定，它使用块(block)、元素(element)、修饰符(modifier)来构建可重用的组件。BEM命名规范非常适合构建大型Web应用程序，因为它使你的CSS更易于管理和维护。
例如，在BEM中，一个可重用的按钮组件可能有以下CSS类：
.btn /* block */ .btn__text /* element */ .btn--red /* modifier */
什么是多语言设置？
在现代Web开发中，多语言设置变得越来越重要。它使您的应用程序可以支持全球市场，并且可以更好地服务您的用户群体。通过多语言设置，可以帮助您实现更好的用户体验和更高的用户满意度。
如何使用 react-app-rewire-bem-i18n-loader？
前提条件: 你的 React 项目已经安装 react-app-rewired。
第一步：安装 react-app-rewire-bem-i18n-loader
在终端中输入以下命令来安装 react-app-rewire-bem-i18n-loader。
npm install react-app-rewire-bem-i18n-loader --save-dev
第二步：配置 config-overrides.js
在根目录下创建一个名为 config-overrides.js 的文件，然后添加以下内容：
-- -------------------- ---- -------
----- ------------- - ----------------------------------------------
-------------- - -------- ---------------- ---- -
-- -- ------------ -- ---------
------ - --------------------- -----
-- ---- -------------------------------- - ------
--------------------------
----- --------
---- -------------------------------------
-------- --------------
---
------ -------
--第三步：创建 bem.json 与 i18n.json 文件并添加语言
在项目的根目录下创建一个名为 bem.json 的文件，并添加 BEM 类的样式。
例如，我们构建一个可重用的按钮组件：
-- -------------------- ---- -------
-
--------- -
-------- ------
------- -
-
------- -------
------- ------ ----- -----
--
-
------- --------
------- --------- -------
-
-
-
-接下来，我们创建一个名为 i18n.json 的文件，并添加两个语言版本的翻译。
-- -------------------- ---- -------
-
----- -
------- -
----------- ------- -------
-
--
-------- -
------- -
----------- --------
-
-
-第四步：添加 BEM 类和多语言设置样式
现在，我们可以在React组件中添加BEM类和多语言设置了。
例如，我们更新我们的按钮组件，并为它添加 BEM 类和多语言设置：
-- -------------------- ---- -------
------ ----- ---- --------
------ --- ---- ---------------------------------------
-- -------
------ ---- ---- ----------------------------------------
------ -------------
------ --------------
----- ------ ------- --------------- -
-------- -
----- - ----- ------ ---- - - -----------
-- ------------
----- -------- - ------------------------
----- ---------- - ------------- ------ --------
------ -
------- --------------------------------- ---------------
--
-
-
------ ------- -------总结
在本文中，我们介绍了一个npm包——react-app-rewire-bem-i18n-loader，它可以很容易地处理BEM类和多语言设置。
在我们的React项目开发中，我们经常需要使用BEM类和多语言设置，这些特性能够极大地提高我们的应用程序的可重用性和适应性。
记得在您自己的React项目中尝试使用 react-app-rewire-bem-i18n-loader，并体验BEM类和多语言设置的魅力！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bd681e8991b448e578c