前言
随着前端技术的不断发展，ES6+成为了前端开发的主流，但是由于浏览器的兼容性问题，我们需要使用Babel来将ES6+代码转换成ES5代码，这样才能够在所有浏览器上运行。
Babel是一个非常强大的工具，它可以将ES6+代码转换成ES5代码，但是在使用过程中也会遇到一些问题。本文将介绍Babel 7为我们解决了哪些问题，以及如何使用Babel 7进行一键编译ES6+代码。
Babel 7 解决的问题
Polyfill
在ES6+中，新增了很多新的语法和API，如箭头函数、Promise、Map等等。但是这些新特性并不是所有浏览器都支持的，为了让这些新特性在所有浏览器上都能够运行，我们需要使用Polyfill。
在Babel 7中，Polyfill被移除了，取而代之的是@babel/polyfill。这个包可以让我们在代码中使用ES6+的新特性，同时也会自动将缺失的API进行Polyfill，从而实现浏览器兼容。
-- -------------------- ---- ------- ------ ----------------- ------ ------------------------------ ----- -------- ----- - ----- ------------------ ----- --- - --- ------ ----- --- - --- ------ ----- --- - - -- - -- ----- -------- - - ------ -- ----- --- - --- -- --- ----- -------- - --------- -
上面的代码中，我们使用了ES6+的新特性，如async/await、Map、Set、对象展开、数组展开等等。在代码中引入@babel/polyfill，就可以让这些新特性在所有浏览器上运行。
Plugin
Babel 7中新增了很多Plugin，可以帮助我们更好地转换ES6+代码。下面介绍一些常用的Plugin。
@babel/plugin-proposal-class-properties
在ES6+中，我们可以使用class定义类，但是这个语法还不够完善，无法定义类的属性。@babel/plugin-proposal-class-properties可以让我们在类中定义属性。
class Foo {
bar = 'bar';
}上面的代码中，我们使用class定义了一个类Foo，同时在类中定义了一个属性bar。使用@babel/plugin-proposal-class-properties，就可以让这个语法在所有浏览器上运行。
@babel/plugin-transform-runtime
在ES6+中，我们可以使用Promise、async/await等新特性，但是这些特性需要依赖于一些运行时库，如regenerator-runtime。@babel/plugin-transform-runtime可以让我们在代码中使用这些特性，同时也会自动引入所需的运行时库。
import { Promise } from 'bluebird';
async function foo() {
await Promise.resolve();
}上面的代码中，我们使用了bluebird库中的Promise，同时使用了async/await。使用@babel/plugin-transform-runtime，就可以让这些特性在所有浏览器上运行。
使用Babel 7进行一键编译ES6+代码
使用Babel 7进行一键编译ES6+代码非常简单，只需要安装@babel/cli和@babel/preset-env两个包，然后在命令行中执行以下命令即可。
npx babel src --out-dir dist --presets @babel/preset-env
上面的命令中，src是源代码目录，dist是输出目录，@babel/preset-env是Babel 7中默认的预设，它包含了所有ES6+的新特性。
如果需要使用更多的Plugin，可以在命令行中添加--plugins参数。
npx babel src --out-dir dist --presets @babel/preset-env --plugins @babel/plugin-proposal-class-properties,@babel/plugin-transform-runtime
上面的命令中，我们添加了@babel/plugin-proposal-class-properties和@babel/plugin-transform-runtime两个Plugin。
结语
Babel 7是一个非常强大的工具，它可以让我们使用ES6+的新特性，同时也可以帮助我们解决浏览器兼容性问题。在使用Babel 7时，我们可以使用@babel/polyfill来实现Polyfill，使用@babel/plugin-proposal-class-properties和@babel/plugin-transform-runtime等Plugin来更好地转换ES6+代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d35801a941bf7134651821
