前言
在前端开发中，我们经常使用 CSS-in-JS 的库来管理样式，其中一个非常流行的库就是 Glamorous。Glamorous 提供了一种将样式与组件紧密结合的方式。然而，由于它的实现方式，它的组件名字默认是匿名的，而这给调试和维护带来了很大的困难。针对这个问题，babel-plugin-glamorous-displayname 应运而生，可以为 Glamorous 的组件自动生成漂亮的名称。
安装
首先，我们需要安装 babel-plugin-glamorous-displayname。
npm install babel-plugin-glamorous-displayname --save-dev
然后，在你的 .babelrc 文件中，添加 "glamorous-displayname" 到 plugins 数组中即可：
-- -------------------- ---- -------
-
---------- -
--------
-----
--
---------- -
-----------------------
-
-使用
在添加了插件之后，你就可以在你的 Glamorous 组件中查看它们的名称了。
-- -------------------- ---- -------
------ --------- ---- -----------
----- ------------ - ------------------
------ --------
---------------- ------
--
-------- ----- -
------ -
------------------- -----------------
-
-然后，你可以在浏览器控制台中看到这个组件的名称。
这个组件名称是由 babel-plugin-glamorous-displayname 自动生成的，你可以通过这个名称更好地调试和排查问题。如果你在多个组件中使用了同一个定义，每个组件的名称也是不同的。
深度挖掘
babel-plugin-glamorous-displayname 的实现方式非常简单，它针对 Glamorous 函数的返回值做了一点小处理。在函数的返回值中，添加了一个 displayName 属性，这个属性的值是一个随机生成的字符串。
-- -------------------- ---- -------
----- ----------------- - ------ -- ------------ -- -
-- ----- ----------- ----------
--------------------------
--------------------------------------------- -----------------------------
--
--
-------------- - --------------- -
----- - - ------------
------ -
-------- -
-------------------- ------ -
-- ----- --------- -----
-- --------------------------------- - ----- ----------- --- -
----- ----------- - ------------------------- -- ---------
-- ------- ------ --
---------------
--------------------- -
----------------------- -- ------------- -- ------- ----------- --
-
---
-
-
-
--
--比较有意思的是，babel-plugin-glamorous-displayname 生成随机字符串的方式并不简单粗暴。它采用了自己的 id-generator 库，这个库生成的 ID 不仅是随机的，也是唯一的，并且长度固定。
class IdGenerator {
static generateId() {
return 'glamorous-' + shortid.generate();
}
}
module.exports = IdGenerator;总结
Glamorous 是一个非常流行的 CSS-in-JS 库，在其中自动生成漂亮的组件名称可以让我们更好的理解和维护代码。通过 babel-plugin-glamorous-displayname，我们可以很容易地实现这个功能。除此之外，它在生成随机字符串时还采用了自己的 id-generator 库，这也可以给我们一些启发：在实现一些简单功能组件时，我们可以先从细节上做起，反而可以写出更具深度和参考性的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f39329bdbf7be33b2566fc0