在前端开发中，ES6 是一种较为流行的 JavaScript 语言标准。而 CSS Modules 则是一种 CSS 模块化的解决方案。这两种技术的结合可以大大提高前端开发的效率和代码质量。
本文将介绍如何使用 Babel 编译 ES6 代码，并同时支持 CSS Modules。我们将从安装 Babel 开始，一步步地介绍如何配置 Babel，使用 Babel 编译 ES6 代码，并最终支持 CSS Modules。
安装 Babel
Babel 是一种 JavaScript 编译器，可以将 ES6 代码编译成 ES5 代码，以便在更多的浏览器中运行。安装 Babel 的方法很简单，只需要在终端中运行以下命令即可：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
安装完成后，我们需要配置 Babel，以便让它能够正确地编译 ES6 代码。
配置 Babel
在 Babel 中，我们需要使用 preset 来指定编译的规则。@babel/preset-env 是一种常用的 preset，它可以根据当前的环境，自动选择需要编译的规则。
我们可以在项目的根目录下创建一个 .babelrc 文件，来配置 Babel。在 .babelrc 文件中，我们可以指定需要使用的 preset，以及其他的编译选项。
下面是一个 .babelrc 文件的示例：
{
"presets": [
"@babel/preset-env"
]
}在这个示例中，我们指定使用 @babel/preset-env 这个 preset。这个 preset 会根据当前的环境，自动选择需要编译的规则。
使用 Babel 编译 ES6 代码
使用 Babel 编译 ES6 代码非常简单，只需要在终端中运行以下命令即可：
npx babel src --out-dir lib
这个命令会将 src 目录下的所有 ES6 代码编译成 ES5 代码，并将编译后的代码存放在 lib 目录下。
支持 CSS Modules
现在，我们已经成功地将 ES6 代码编译成了 ES5 代码。接下来，我们需要支持 CSS Modules。
首先，我们需要安装 css-loader 和 style-loader，这两个库可以让我们在 JavaScript 中引入 CSS 文件。
npm install --save-dev css-loader style-loader
安装完成后，我们可以在 JavaScript 中引入 CSS 文件，并使用 CSS Modules。
下面是一个示例代码：
import styles from './styles.module.css'; console.log(styles.foo); // 打印出 CSS 类名 foo
在这个示例代码中，我们使用 import 关键字引入了一个 CSS 文件。这个 CSS 文件使用了 CSS Modules，因此我们可以通过 styles 对象来获取 CSS 类名。
总结
本文介绍了如何使用 Babel 编译 ES6 代码，并同时支持 CSS Modules。我们从安装 Babel 开始，一步步地介绍了如何配置 Babel，使用 Babel 编译 ES6 代码，并最终支持 CSS Modules。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650956b595b1f8cacd411ed4