在现代前端开发中，ES6 (也称为 ES2015) 已经成为了一个重要的标准，它引入了许多方便的语言特性和新的语法。然而，由于某些浏览器还不支持 ES6，因此我们需要将它们编译成普通的 JS 代码，以便于在各种浏览器中运行。
为此，我们可以使用一个叫做 Babel 的工具，它是一个可配置的 JS 编译器，可以将 ES6 代码转换成常规的 JS 代码。本文将介绍如何使用 Babel 创建一个从 ES6 到 JS 的编译器，并提供详细的示例代码。
安装
首先，我们需要安装 Babel。在终端中输入以下命令即可安装：
npm install --save-dev babel-core babel-preset-env babel-cli
其中，babel-core 是 Babel 的核心库，babel-preset-env 是一个配置集合，可以帮助我们根据目标浏览器版本自动选择需要转换的语言特性，babel-cli 则是一个命令行工具。
配置
接下来，我们需要创建一个 .babelrc 文件，用于配置 Babel 的参数。在项目的根目录中创建该文件，并添加以下内容：
{
"presets": ["env"]
}这个配置文件告诉 Babel 使用 env 预设集合来转换代码。这个集合会自动根据目标浏览器版本选择需要转换的语言特性，这样我们就无需手动配置转换规则了。
使用
完成上述安装和配置后，我们可以编写一些 ES6 代码，并使用 Babel 将其转换为普通的 JS 代码。例如，我们想要将以下 ES6 代码转换为 JS 代码：
const greet = (name) => {
console.log(`Hello, ${name}!`);
}
greet('World');首先，我们在终端中进入到项目目录，并执行以下命令：
./node_modules/.bin/babel --out-file dist/app.js src/app.js
这个命令会将 src/app.js 文件中的 ES6 代码转换为 JS 代码，并将结果输出到 dist/app.js 文件中。
如果我们要对整个项目进行转换，可以使用以下命令：
./node_modules/.bin/babel src -d dist
这个命令会将 src 目录下的所有 JS 和 ES6 文件转换为常规的 JS 文件，并输出到 dist 目录中。
最后，我们可以用浏览器打开 dist/index.html 文件，验证我们的代码在浏览器中运行正常。
结论
使用 Babel 创建从 ES6 到 JS 的编译器非常方便，并能够帮助我们在现代浏览器中使用最新的语言特性。本文提供了详细的示例代码，并希望能够帮助读者理解 Babel 的使用方法和机制，并为读者提供一些参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676df99b82fcee791c6b2a19