前言
ES6 是 ECMAScript 6 的简称，它是 JavaScript 的下一代标准，也是 JavaScript 的重大更新。ES6 引入了很多新特性，使得 JavaScript 语言更加强大和易用。然而，目前仍有很多浏览器不支持 ES6，因此我们需要使用 Babel 来将 ES6 代码转换成 ES5 代码，以便在现代浏览器中使用。
在使用 Babel 编译 ES6 代码时，我们还需要支持 Source maps，以便在开发过程中快速定位错误。本文将介绍如何使用 Babel 编译 ES6 代码并同时支持 Source maps。
安装 Babel
首先，我们需要安装 Babel。可以使用 npm 命令进行安装。
npm install babel-cli babel-core babel-preset-env --save-dev
babel-cli：Babel 命令行工具。babel-core：Babel 核心库。babel-preset-env：Babel 预设，用于编译 ES6 代码。
配置 Babel
接下来，我们需要在项目中创建一个 .babelrc 文件，用于配置 Babel。该文件应该包含以下内容：
{
"presets": ["env"]
}该配置表示使用 env 预设来编译 ES6 代码。
使用 Babel 编译 ES6 代码
现在，我们可以使用 Babel 编译 ES6 代码了。可以使用以下命令来编译代码：
babel src --out-dir dist
src：表示源代码目录。dist：表示编译后的代码目录。
支持 Source maps
为了支持 Source maps，我们需要使用 babel-cli 提供的 --source-maps 参数。可以使用以下命令来编译代码并生成 Source maps：
babel src --out-dir dist --source-maps
该命令将会生成 .js 和 .js.map 两个文件。.js 文件是编译后的代码，.js.map 文件是 Source maps 文件。
示例代码
以下是一个示例代码，它演示了如何使用 Babel 编译 ES6 代码并同时支持 Source maps。
// index.js
const hello = () => {
console.log('Hello, world!');
};
hello();在命令行中使用以下命令来编译代码并生成 Source maps：
babel index.js --out-file index-compiled.js --source-maps
该命令将会生成 index-compiled.js 和 index-compiled.js.map 两个文件。index-compiled.js 文件是编译后的代码，index-compiled.js.map 文件是 Source maps 文件。
在浏览器中打开 index.html 文件，并打开开发者工具，可以看到 Source maps 文件已经生效，可以在开发者工具中快速定位错误。
总结
本文介绍了如何使用 Babel 编译 ES6 代码并同时支持 Source maps。Babel 是一个非常强大的工具，可以帮助我们编译 ES6 代码，并且还支持很多其他的功能，例如编译 JSX、编译 TypeScript 等。掌握 Babel 是每个前端开发者必备的技能之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650706b295b1f8cacd298b46