背景
随着 ECMAScript 标准的不断升级，前端开发者需要做出相应的更新来使用新的语言特性。然而，由于浏览器对这些新特性的支持程度各不相同，为了确保代码可以在所有浏览器上运行，我们需要使用一个工具来将新的语言特性转换成旧版 JavaScript 语法，这个工具就是 Babel。
Babel 是一个 JavaScript 编译器，它可以把新版本的 JavaScript 代码转换成向后兼容的旧版 JavaScript 代码。Babel 提供了许多插件和预设，其中两个最常用的预设是 babel-preset-es2015 和 babel-preset-env。
区别
babel-preset-es2015 是专门为 ES6/ES2015 设计的预设，它包含了所有 ES6/ES2015 中引入的新特性，如箭头函数、模板字符串、解构赋值等等。如果你只需要编写 ES6/ES2015 的代码，并且只关心这部分代码的转换，那么使用 babel-preset-es2015 就足够了。
babel-preset-env 则更具有普适性，它是一个智能预设，根据目标环境（即要支持的浏览器或 Node.js 版本）自动决定需要启用哪些插件和转换规则。这样，我们可以只关注我们要支持的环境，而不需要手动添加每个新特性的插件。babel-preset-env 还会自动根据环境调整代码转换的输出结果，使其尽可能地小而优化。
使用方法
下面是如何使用这两个预设的示例：
babel-preset-es2015
首先，安装 Babel 和 babel-preset-es2015，可以使用 npm 安装：
--- ------- ---------- ----------- --------------------
然后，在 .babelrc 文件中添加以下内容：
- ---------- ------------------------ -
现在，可以使用 ES6/ES2015 语法编写代码，并且它们将被自动转换为 ES5 语法。
babel-preset-env
首先，安装 Babel 和 babel-preset-env，可以使用 npm 安装：
--- ------- ---------- ----------- -----------------
然后，在 .babelrc 文件中添加以下内容：
-
---------- -
-
--------------------
-
---------- -
----------- ------ - ---------- ------- -- ---
-
-
-
-
-这里设置了目标浏览器为“最近两个版本”和“Safari 7 及更高版本”。因此，Babel 将启用所有必要的插件和转换规则来确保代码在这些浏览器上正常运行。
总结
babel-preset-es2015 和 babel-preset-env 对于 ES6/ES2015 的转换都很好用，但是选择哪一个预设取决于你的需求。如果你只关心 ES6/ES2015，那么使用 babel-preset-es2015 就足够了。如果你希望更加灵活地控制目标环境，并且自动启用必要的插件和规则来确保代码正常运行，那么选择 babel-preset-env 是个不错的选择。
无论你选择哪个预设，都应该了解它们的工作原理，并根据需要进行配置。这样可以确保代码在所需的环境中正常运行。
示例代码
下面是一些示例代码，演示了如何使用箭头函数和模
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30203