在前端开发中，我们经常需要使用 Babel 将 ES6+ 语法转换为浏览器可执行的 JavaScript 代码，这时我们就需要使用 Babel 的 Preset。其中，@babel/preset-stage-3 是 Babel 的一个 Preset，它包含了一些还在草案阶段的 ECMAScript 标准，可以让我们在项目中使用一些语法提案。
安装 @babel/preset-stage-3
使用 @babel/preset-stage-3 之前，我们需要先安装它。在命令行中输入以下命令：
npm install --save-dev @babel/preset-stage-3
使用 @babel/preset-stage-3
安装好 @babel/preset-stage-3 之后，在项目的 .babelrc 文件中，加入以下配置：
{
"presets": [
"@babel/preset-env",
"@babel/preset-stage-3"
]
}其中，@babel/preset-env 是 Babel 的主 Preset，它包含了所有已经通过标准的 ECMAScript 特性，可以将我们的代码转换为当前浏览器可以支持的最新 JavaScript 代码。
使用了 @babel/preset-stage-3 后，我们就可以使用一些新的 ECMAScript 特性，如以下示例代码：
-- -------------------- ---- -------
----- ------ -
----- - ---
------------- -
---------- - -----
-
--------- -
------ -----------
-
-以上代码中，使用了私有属性（#name）的语法提案。在使用了 @babel/preset-stage-3 的情况下，这段代码会被转换为以下 JavaScript 代码：
-- -------------------- ---- -------
---- --------
-------- ------------------------- ------------ - -- ----------- ---------- ------------- - ----- --- ----------------- ---- - ----- -- - ----------- - -
--- ------ - -------- -------- -
--- ----- - -----
--------------------- --------
--- ----- - ---
------------ - -------- ------ -
----------- - -----
--
------------ - -------- -- -
------ ------------
--
--可以看到，使用了 @babel/preset-stage-3 后，我们就可以使用私有属性的语法提案。
总结
@babel/preset-stage-3 是 Babel 的一个 Preset，它包含了一些还在草案阶段的 ECMAScript 标准，可以让我们在项目中使用一些语法提案。在使用 @babel/preset-stage-3 之前，我们需要先安装它。使用时，在项目的 .babelrc 文件中，加入 @babel/preset-stage-3 和 @babel/preset-env 的配置即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/106008