通过预处理更改元素 ID 和类答案

【问题标题】：Change element IDs and classses with preprocessing通过预处理更改元素 ID 和类
【发布时间】：2019-04-04 08:20:38
【问题描述】：

我非常相信使用人类可读的名称来命名事物，但我同样意识到.easy-to-read-and-informative-name-for-element 对于生产代码来说有点过头了。

那么有没有办法在生产代码中为开发维护长且信息丰富的名称并将其变成可能的最短名称，例如.a？在所有可能引用它的地方，标记、css、js？

我愿意使用 Grunt、Gulp、Webpack - 或其他任何可能的方法。

【问题讨论】：

【解决方案1】：

您可以使用 Webpack 中的 css-loader 来混淆类：https://github.com/webpack-contrib/css-loader 使用 module 选项。

【讨论】：

我不明白如何实现我所描述的。你能举个例子说明你的想法吗？
这个 webpack 模块获取您的类名并将其转换为随机生成的名称（根据您传递的选项）。例如：medium.freecodecamp.org/…
如何将随机化的 CSS 名称与同一元素的标记和 javascript 引用对齐？
这将对齐 HTML 标记中存在的 CSS 类。对于 JavaScript，取决于您使用的是库还是纯 JavaScript。以 React 为例，您可以避免将处理程序直接添加到组件中。使用 vanilla 或 jQuery，而不是使用 CSS 类来添加处理程序，您可以拥有一个 data 属性并使用它进行查询：$("[data-name]")