babel-preset-env 和 css-modules 的冲突
在前端开发中，babel-preset-env 和 css-modules 是非常常见的两个工具。babel-preset-env 是一个 Babel 插件，用于根据当前环境自动确定需要使用的 Babel 插件和 polyfill，从而实现转译 ES6+ 语法为目标环境所支持的语法。而 css-modules 是一种用于 Webpack 的 CSS 模块化方案，可以将 CSS 样式文件中的类名转换为独一无二的类名，防止 CSS 样式的全局污染和冲突。但是，在实际使用中，这两个工具有可能产生冲突，本文将详细介绍冲突原因和解决方法。
问题描述
在使用 babel-preset-env 转译 ES6+ 代码时，会自动启用一些插件来转译一些高级语法，例如箭头函数、模板字符串等。这些插件对于诸如 import/export 之类的 ES 模块化语法很友好，但对 css-modules 的类名处理却不适用。原因是这些插件将样式文件中的类名视为变量名，执行转译后会将类名转换为其他名称，导致 css-modules 处理的样式名与实际 DOM 上的类名不匹配，无法起到样式作用。
例如，假设我们有一个样式文件 style.css 包含了一个按钮的样式：
.btn {
background-color: #f00;
}我们在 JS 中将该样式文件导入，并使用 css-modules 对样式名进行处理：
import styles from './style.css';
const btn = document.createElement('button');
btn.className = styles.btn; // 'btn_b3q7k'在使用了 babel-preset-env 后，会将 ES6+ 代码转译为 ES5 代码，其中会启用一些插件，例如 transform-arrow-functions，transform-template-literals 等，这些插件会将代码中的类名视为变量，执行转译后，样式中的类名就被改变了：
const styles = {};
styles.btn = 'btn_b3q7k';
const btn = document.createElement('button');
btn.className = styles.btn; // 'btn_b3q7k'由于样式中的类名被改变了，css-modules 处理后的类名就与实际 DOM 上的类名不匹配，从而导致样式无法生效。
解决方法
解决该问题的方法有两种：一种是禁用 babel-preset-env 中与 CSS 类名冲突的插件，另一种是使用 postcss-modules 或在 Webpack 配置中增加一个自定义的 css-loader 来处理 CSS 文件，将类名转换为独一无二的类名。
禁用 babel-preset-env 插件
首先，我们需要确定 babel-preset-env 插件中与 CSS 类名冲突的插件是哪些。幸运的是，babel-preset-env 已经为我们提供了一种方式来排除不需要的插件。
在 .babelrc 文件中，我们可以使用 exclude 字段来排除不需要的插件。例如，我们可以使用以下配置来禁用 transform-arrow-functions 和 transform-template-literals 两个插件：
-- -------------------- ---- -------
-
---------- -
-
------
-
---------- -
----------------------------
-----------------------------
-
-
-
-
-该配置将告诉 babel-preset-env 在转译 ES6+ 代码时，不使用这两个插件来转译样式中的类名，从而避免与 css-modules 产生冲突。
使用 postcss-modules
除了禁用 babel-preset-env 插件，我们还可以使用 postcss-modules 来处理 CSS 文件中的类名。
postcss-modules 是一个 PostCSS 插件，它可以将 CSS 文件中的类名转换为独一无二的类名，并在使用时将转换后的类名反映到 JS 中。使用该插件需要在 Webpack 配置文件中进行如下配置：
-- -------------------- ---- -------
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------- -
--------------- ----------------------------------
--
-------------- --
--
--
-
------- -----------------
-------- -
-------- -
----------------------------
------------------- ----------------------------------
---
--
--
--
-
-该配置将使用 css-loader 和 postcss-loader 来处理 CSS 文件，其中 postcss-modules 插件会将类名转换为独一无二的类名。在 JS 中，我们可以使用 import 导入 CSS 文件，并在使用时将 CSS 样式中的类名映射到转换后的类名：
import styles from './style.css';
const btn = document.createElement('button');
btn.className = styles.btn; // 'style_btn__24ztf'该方法将解决 babel-preset-env 和 css-modules 这两个工具之间的冲突问题。
结论
在开发过程中，babel-preset-env 和 css-modules 是两个非常有用的工具，但是在实际使用中也可能会产生冲突。我们需要了解这两个工具的内部工作原理，以便能够更好地解决问题。在遇到 babel-preset-env 和 css-modules 冲突问题时，我们可以通过禁用 babel-preset-env 插件或使用 postcss-modules 插件解决问题。在实践中，我们应该根据具体情况来选择适合自己的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ef990e884a3e30f2b540f