在前端开发中，我们经常需要根据不同的条件动态地添加或移除元素的 class，而 classnames 就是一个方便的库，能够帮助我们快速生成符合条件的 class 名称字符串。然而，当我们需要在多个 JS 文件中频繁使用 classnames 时，每次都手动引入和使用它也显得不够优雅。
这时，classnamesplus-loader 就发挥了它的作用。classnamesplus-loader 是一款 webpack loader，能够自动将指定的 classnames 函数转换成全局可用的形式。
安装
首先，我们需要在项目中安装 classnamesplus-loader。
--- ------- --------------------- ----------
使用
接下来，我们需要在 webpack 的配置文件中将 classnamesplus-loader 添加为一个 module 执行的 loader。
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- ---------- -- -- --- - ---- ---
---- -
-- - --------------------- ----
-
------- ------------------------
-- ---
-------- -
----------- -------
-
-
--
-- -- ------------ --
-------- ---------------
--
-
-
-这里需要注意的是，我们已经将 exportName 配置为 'class'，它将是我们后面在 JS 文件中使用的全局变量名。
现在我们可以在 JS 文件中使用 class 这个全局变量了：
-- -- ---------- - ------ ---------- ---- ------------ -- ---------- ---- ----- ----------- - ------------ ------ ----- -------------- ---------- ------------- ----------- -- -- ----- ----- --------- ----- ----------- - ------- ------ ----- -------------- ---------- ------------- ----------- --
示例
接下来我们来看一个简单的示例，假设我们有两个 JS 文件 demo1.js 和 demo2.js，它们都需要使用 classnames 库：
-- -------- ------ ---------- ---- ------------ ----- -------------- - ------------ ------------ ----- ------------------ -------- -- -- -------- ------ ---------- ---- ------------ ----- -------- - ----------------- - ------------ -------- ----------- --------- --
我们可以使用 classnamesplus-loader 来简化这个过程：
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ------------------------
-------- -
----------- -------
-
-
--
-------- ---------------
--
-
-
-
-- -------- - --------
----- -------------- - -------
------------ -----
------------------ --------
--
----- -------- - ------------ -
------------ --------
----------- ---------
--通过 classnamesplus-loader，我们不再需要在每个使用了 classnames 的文件中手动引入它，而是使用全局变量 class 来简化调用过程。
结论
classnamesplus-loader 为我们在前端开发中使用 classnames 库提供了更方便的方式，减少了在每个文件中手动引用的繁琐流程。在特别是多文件、多组件的项目中是十分实用的。
最后提醒一下，使用全局变量在某些情况下会出现变量冲突和耦合度增加的问题，应根据项目实际情况来选择使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600553ed81e8991b448d1412