前言
Babel 是一个 JavaScript 编译器，可以将现代 JavaScript 代码转换成在当前 Web 浏览器中可执行的代码。随着 Web 技术的不断发展，JavaScript 语言也不断更新，为此，Babel 也在不断升级，以适应新的 JavaScript 标准和语法。Babel 7 是目前 Babel 的最新版本，它带来了一些重大的更新，本文将对 Babel 7 进行详细介绍。
Babel 7 的重大更新
取消 Stage Preset
在 Babel 7 之前的版本中，Babel 为实验性的 ECMAScript 特性提供了 Preset，即 @babel/preset-stage-x。这些 Preset 允许用户在实验性语法稳定之前尝试新的 JavaScript 语言功能。Babel 7 取消了这些 Preset，转而将特殊语法插件分类到 plugin-proposal-* 和 plugin-syntax-* 中。这样做的目的是让用户更加清楚地知道哪些插件是实验性质的。
移除 Polyfill
Babel 7 移除了内置的 Polyfill，即 @babel/polyfill。Polyfill 的作用是在运行时添加不支持的特性。然而，Polyfill 的大小和性能都是问题。Babel 7 推荐使用 core-js 和 regenerator-runtime，这两个库可以帮助你完成和 Polyfill 相同的工作，并且体积更小、速度更快。
更新默认配置
在 Babel 7 中，@babel/preset-env 取代了 @babel/preset-latest，成为默认的 Preset。@babel/preset-env 可以根据配置的目标浏览器或环境，自动地进行特性转换和 Polyfill，从而让用户使用最新的 JavaScript 语言特性，而不用担心浏览器或运行环境的不兼容性。
Babel 7 的使用
Babel 7 的安装可以使用 npm 或 yarn 完成。
npm install --save-dev @babel/core @babel/cli @babel/preset-env
或者
yarn add --dev @babel/core @babel/cli @babel/preset-env
安装完成之后，可以通过以下命令进行编译。
npx babel source --out-dir dist
其中 source 是源代码目录，dist 是输出目录。
如果要使用 @babel/preset-env，则可以在 .babelrc 文件中添加以下配置。
{
"presets": [
"@babel/preset-env"
]
}这样 Babel 就会根据当前的环境，转换成相应的 JavaScript 语言特性。
示例代码
下面是一个使用 Babel 7 转换 ES6 的示例代码。
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- -
------------------------- ----- - ---------
-
-
----- --- ------- ------ -
----------------- -
------------
-
------- -
------------------------- ---------
-
-
----- - - --- --------------
----------这段代码定义了一个 Animal 类和一个 Dog 类，它们分别表示动物和狗。在定义 Dog 类时，使用了 ES6 的extends关键字，表明它继承自 Animal 类。在使用 Babel 7 编译后，这段代码将会转换成 ES5 语法，以便在旧版浏览器中运行。
-- -------------------- ---- -------
---- --------
-------- ------------------------ ----------- -
------------------ - ------------------------------------
------------------------------ - ---------
------------------ - -----------
-
--- ------ - --------------------- -- -
-------- ------------ -
--------- - -----
-
--- ------ - -----------------
------------ - -------- ------- -
--------------------- - - ----- - ---------
--
------ -------
----
--- --- - --------------------- --------- -
------------------- ---------
-------- --------- -
------ ------------------ ----- -- -----
-
--- ------- - --------------
------------- - -------- ------- -
--------------------- - - ---------
--
------ ----
----------
--- - - --- --------------
----------总结
Babel 7 带来了一些重大的更新，其中最重要的是取消了 Stage Preset、移除了内置的 Polyfill 和更新了默认的配置。这些更新让 Babel 更加清晰、灵活、高效。Babel 7 的使用也非常简单，可以通过 npm 或 yarn 安装，并在 .babelrc 文件中配置相关参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ef729968c7c53b0118f36