在前端开发中，BEM 等 CSS 模块化方案已经变得非常流行。为了更加方便地在 React 项目中使用 BEM，webpack-bemjson-to-jsx-loader 应运而生。本文将介绍这个 npm 包的使用教程，帮助开发者更好地使用该工具拓展 CSS 到 React 项目中并写出干净结构的代码。
什么是 webpack-bemjson-to-jsx-loader？
webpack-bemjson-to-jsx-loader 是一个 webpack 的 loader，它可以把 BEM 的类选择器转换为 React 中的 JSX 语法。通过此工具，开发者可以简便地将 BEM 的类选择器与 React 中的组件相结合，从而快速开发 React 项目。
安装 webpack-bemjson-to-jsx-loader
在项目中安装 webpack-bemjson-to-jsx-loader 命令如下：
npm install webpack-bemjson-to-jsx-loader --save-dev
使用 webpack-bemjson-to-jsx-loader
- 项目中安装 babel-loader（babel-loader 是一个 webpack loader，用于将 ES6 代码转换成 ES5 代码）：
npm install babel-loader --save-dev
- 安装 react 和 react-dom：
npm install react react-dom --save-dev
- 在 webpack 配置文件中添加如下代码：
-- -------------------- ---- -------
-------------- - -
-- ----- --- ------ - ---- - -------- -
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -----------------------
-
-
--
-
----- -------------
---- -
-
------- -------------------------------
-
-
-
-
-
--- 在组件文件中添加 import 语句引入 BEM JSON 文件：
import React from 'react'; import './MyComponent.bemjson';
- 在 JSX 中使用 BEM 类名：
-- -------------------- ---- -------
----- ----------- - -- -- -
---- ------------------------
---- --------------------------------
--- -------------------------------------- --------------------- -------------
------
---- ---------------------------------
---------- --------------------- -- - ------- ------ ----- ------- --- -- --- --- ---- -- ---- ----- -----------------
------
------
--
------ ------- ------------示例代码
首先在项目中创建 MyComponent.bemjson 文件如下：
-- -------------------- ---- -------
-
-------- --------------
---------- -
-
------- ---------
---------- -
------- --------
---------- -------- --------------------- ---------
-
--
-
------- ----------
---------- ----------- --------------------- -- - ------- ------ ----- ------- --- -- --- --- ---- -- ---- ----- ------------------
-
-
-然后在项目中创建 MyComponent.js 如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------------
----- ----------- - -- -- -
---- ------------------------
---- --------------------------------
--- -------------------------------------- --------------------- -------------
------
---- ---------------------------------
---------- --------------------- -- - ------- ------ ----- ------- --- -- --- --- ---- -- ---- ----- -----------------
------
------
--
------ ------- ------------最后在项目中创建 App.js 如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ----------------
----- --- - -- -- -
-----
------------ --
------
--
------ ------- ----总结
webpack-bemjson-to-jsx-loader 为开发者提供了一种便利的使用 BEM 的方式，通过实现 BEM JSON 与 React 的结合，为项目带来更加清晰、干净的结构。本文介绍了 webpack-bemjson-to-jsx-loader 的使用教程，希望能够帮助开发者快速上手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d0927023822649