在前端开发领域，ES6 及更高版本的 JavaScript 已经成为了日常开发的标配。但是这些新特性并不是所有浏览器都支持，这就需要我们使用 Babel 这个 JavaScript 编译器来将 ES6 代码转换成浏览器可以理解的 JavaScript 代码。而使用预设 Preset-es2015 可以让 Babel 编译更加快速。
什么是 preset-es2015？
Preset-es2015 是一个 Babel 预设（Preset），可以轻松地让我们在 ES6 代码中使用大多数新特性。与单个插件不同，预设会一次性解析 ES6 中的所有语法，减少了代码中缺少编译器配置的情况。
实际上，在 ES6 中，有许多新语法能够使我们的代码更加优雅，也能够提高开发效率。下面是 ES6 中的一些常用语法，可以在使用了 Preset-es2015 后直接使用：
- let/const：块级作用域变量声明。
- 箭头函数：更短的语法表示匿名函数。
- 字符串模板：增强版字符串，可以在其中使用变量和函数。
- 解构赋值：赋值操作的一种方式，可以像结构体一样访问对象和数组的成员。
- Promise：处理异步操作的一种方式。
- 使用 for ... of 代替 for ... in 循环：更直观的遍历数组的方式。
- 使用 class 定义类：定义一个类及其属性、方法的语法。
假如我们想让浏览器支持这些新特性，就需要使用 Babel 编译器。但是，如果我们每次都在代码中手动添加这些新特性，那就太麻烦了。这时候，Preset-es2015 就可以发挥作用，一次性地将这些新特性添加到代码中。
为什么推荐使用 preset-es2015？
使用 Preset-es2015 有两个好处：
- 更快的编译速度
如果我们在代码中使用了多个 Babel 插件，那么一次编译可能需要编译多次。这种方式会极大地增加编译时间。而 Preset-es2015 会一次性解决这个问题，它可以覆盖 ES6 中的所有语法，使编译时间更短，更加高效。
- 易于使用和管理
使用多个插件会使我们的代码非常混乱。而 Preset-es2015 可以整合多个插件，使代码更加清晰，同时能够更好地处理新语法，使代码质量更高。
如何使用 preset-es2015？
使用 Preset-es2015 的方式非常简单。下面是一个使用 Preset-es2015 的示例代码：
-- -------------------- ---- -------
-- ----
----- --- - --- -- -- ---
----- ------- - --------- -- - - ---
-- -----
----- ---- - --------
--------------- ---- -- -----------
-- ----
----- --- - - -- -- -- - --
----- - -- - - - ----
-- -------
----- ------- - --- --------------- -- -
------------- -- -
-----------------
-- ------
---
------------------- -- -
--------------------
---
-- --- --- --
----- --- - --- -- ---
--- ---- ---- -- ---- -
------------------
-
-- -----
----- ------ -
----------------- -
--------- - -----
-
--------- -
-----------------------
-
-
----- ------ - --- ----------------
-----------------可以发现，这段代码中使用了 ES6 中的多个新语法，但是如果我们使用了 Preset-es2015，则可以不用再手动添加这些新特性了。
在使用 Babel 时，我们需要做两个准备工作：
- 安装 Babel 和 preset-es2015
npm install --save-dev babel-core babel-preset-es2015
- 创建
.babelrc文件并配置
在项目根路径下创建 .babelrc 文件，并添加如下内容：
{
"presets": ["es2015"]
}表示使用 Preset-es2015 来编译代码。
然后，在代码中引入 Babel 编译器，就可以使用 ES6 的新语法了。
-- -------------------- ---- -------
------
------
---------- ------------
-------
------
---- -- ----- --- ---
------- ------------------------------------------------------------------------
------- ------------------
-- --- --
----- --- - --- -- -- ---
----- ------- - --------- -- - - ---
--------------------- -- --- -- -- ---
---------
-------
-------总结
在使用 ES6 代码的过程中，Babel 是必不可少的。而使用 Preset-es2015 可以更加方便地使用 ES6 的新特性，同时还能够节省编译时间。因此，在实际项目中，我们推荐使用 Preset-es2015 来编译代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659f7838add4f0e0ff8132eb