随着 ECMAScript 9 (ES9, 又称为 ES2018) 的发布，前端工程师需要使用这些新的语法特性来编写代码。然而，现代浏览器和 Node.js 仍然没有完全支持 ES9 的全部特性，这就需要使用 Babel 来将 ES9 转译为 ES5 代码，以确保在现有的环境中运行。
Babel 7 的新特性
Babel 是一个广泛使用的编译器，它可以将新的 ECMAScript 标准转换为向后兼容的代码。Babel 7 是目前最新的版本，它支持转译 ES9，同时也带来了一些新特性。
@babel/preset-env
在 Babel 7 中，@babel/preset-env 取代了之前的 babel-preset-env。这个 preset 能够自动识别环境并根据需要转换代码，包括将 ES9 语法转换为 ES5 代码。此外，@babel/preset-env 还提供了对一些新的全局变量和内置函数的支持。
Object Rest/Spread Properties
ES9 引入了 Rest/Spread Properties，可以更方便地使用对象和数组。Rest Properties 允许我们从一个对象中提取除指定属性外的其余属性，并且将其他属性保存到一个变量中。Spread Properties 允许我们将一个对象的属性扩展到另一个对象中，或将数组展开成一个列表。示例代码：
-- -------------------- ---- ------- -- ---- ---------- ----- - -- -- ------- - - - -- -- -- -- -- -- -- - -- --------------- -- - --------------- -- - ------------------ -- - -- -- -- - - -- ------ ---------- ----- ---- - - -- -- -- - -- ----- ---- - - -------- -- - -- ------------------ -- - -- -- -- -- -- - - ----- ---- - --- --- ----- ---- - --------- --- ------------------ -- --- -- --
Async Iterator
ES9 引入了 Async Iterator，我们可以在异步代码中使用 for...await...of 来遍历异步迭代器对象。示例代码：
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
------ -
-- --
----- ------ -
-- ------- - -- -
------ - ------ --------- ----- ----- --
-
------ - ----- ---- --
-
--
-
--
------ ---------- -
--- ----- ------ --- -- -------------- -
-----------------
-
-----Babel 7 的配置
在使用 Babel 7 编译 ES9 代码之前，我们需要创建一个配置文件 .babelrc。下面是一个基本的配置文件：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -- ------ --- -----
-
-
-
-上述配置将使用 @babel/preset-env 来进行转换，其中 targets 属性指定了需要支持的浏览器和 Node.js 版本。"> 0.25%, not dead" 表示需要支持全球使用量超过 0.25% 且不处于停止维护状态的浏览器和 Node.js。
Babel 7 的使用
安装 Babel 7 和相应的插件：
npm install @babel/core @babel/cli @babel/preset-env --save-dev
编译 ES9 代码：
./node_modules/.bin/babel src --out-dir lib
其中 src 和 lib 分别指代源码和编译后的代码目录。
总结
通过使用 Babel 7 编译 ES9 代码，我们可以在现有的环境中使用新的语法特性，从而提高开发效率和代码质量。需要注意的是，Babel 只能进行语法转换，无法补全缺失的特性，因此在使用新特性时需要注意浏览器和 Node.js 的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ab7b9548841e9894751914