推荐使用 [preset-es2015]，让 Babel 编译更加快速-JavaScript中文网-JavaScript教程资源分享门户

在前端开发领域，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 的示例代码：

// 箭头函数
const arr = [1, 2, 3, 4];
const squares = arr.map(x => x * x);

// 字符串模板
const name = 'Robin';
console.log(`My name is ${name}.`);

// 解构赋值
const obj = { a: 1, b: 2 };
const { a, b } = obj;

// Promise
const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve('hello');
  }, 1000);
});

promise.then(result => {
  console.log(result);
});

// for ... of
const arr = [1, 2, 3];
for (let item of arr) {
  console.log(item);
}

// class
class Person {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}

const person = new Person('Robin');
person.sayName();

可以发现，这段代码中使用了 ES6 中的多个新语法，但是如果我们使用了 Preset-es2015，则可以不用再手动添加这些新特性了。

在使用 Babel 时，我们需要做两个准备工作：

安装 Babel 和 preset-es2015

npm install --save-dev babel-core babel-preset-es2015

创建 .babelrc 文件并配置

在项目根路径下创建 .babelrc 文件，并添加如下内容：

{
  "presets": ["es2015"]
}

表示使用 Preset-es2015 来编译代码。

然后，在代码中引入 Babel 编译器，就可以使用 ES6 的新语法了。

<html>
  <head>
    <title>ES6 Code</title>
  </head>
  <body>
    <!-- 引入 Babel 编译器 -->
    <script src="https://cdn.bootcss.com/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/babel">
      // ES6 代码
      const arr = [1, 2, 3, 4];
      const squares = arr.map(x => x * x);

      console.log(squares); // [1, 4, 9, 16]
    </script>
  </body>
</html>

总结

在使用 ES6 代码的过程中，Babel 是必不可少的。而使用 Preset-es2015 可以更加方便地使用 ES6 的新特性，同时还能够节省编译时间。因此，在实际项目中，我们推荐使用 Preset-es2015 来编译代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/659f7838add4f0e0ff8132eb

推荐使用 [preset-es2015]，让 Babel 编译更加快速

什么是 preset-es2015？

为什么推荐使用 preset-es2015？

如何使用 preset-es2015？

总结

纠错反馈