前言
在 JavaScript 开发过程中，我们经常会用到 Babel 进行代码转换。Babel 是一个能够将 ES6+ 代码转换成浏览器或 Node.js 可以运行的 JavaScript 代码的工具。Babel 官方提供了很多 Preset，但是它们并不是一定满足我们的需求。这时候我们就需要自己编写一个 Preset 来满足我们的需求。本篇文章介绍了 @ryo_suga/babel-preset-ryosuga 这个 Preset 的使用方法。
@ryo_suga/babel-preset-ryosuga
@ryo_suga/babel-preset-ryosuga 是一个由 Ryo Suga 开发的 Babel Preset。它包含了以下插件：
- @babel/plugin-proposal-class-properties
- @babel/plugin-proposal-decorators
- @babel/plugin-proposal-nullish-coalescing-operator
- @babel/plugin-proposal-optional-chaining
- @babel/plugin-transform-runtime
安装
--- - -- ------------------------------
使用
在项目根目录下新建一个.babelrc文件，在文件中添加以下内容：
- ---------- --------------------- -
插件介绍
@babel/plugin-proposal-class-properties
Class 属性提案是 ECMAScript 2019 中的一部分。这个提案允许我们直接在 Class 定义里面声明属性。
-- ---
----- ------- -
------ - ---
-
-- ---
----- ------- -
------------- -
----------- - ---
-
-这个插件使得我们可以在浏览器或 Node.js 运行一些新的语法。实际开发中，我们广泛使用这个新的语法。
@babel/plugin-proposal-decorators
装饰器提案是 ECMAScript 2016 的一部分。它提供了一种方式来将代码和元数据关联起来。使用装饰器的一个应用场景是将 Class 转化为 Store，方便 State 管理。
-----------
----- ----------- -
------
----------- -
-- ---
-
-@babel/plugin-proposal-nullish-coalescing-operator
Nullish Coalescing Operator 是 ECMAScript 2020 提出的一个新的操作符。它提供了一种简单的方法来检查一个值是否 null 或 undefined。
----- --- - ---------- -- ----------
与｜（或）操作符进行比较，?? 操作符只在值为 null 或者 undefined 时返回。
@babel/plugin-proposal-optional-chaining
Optional Chaining 是 ECMAScript 2020 提出的一个新的操作符。它提供了一种简单的方式来检查一个对象的属性是否存在，如果存在则返回属性，如果不存在返回 undefined。
----- --- - ---------------------
@babel/plugin-transform-runtime
使用 Babel 转换 ES6+ 代码时，会将新的语法转化为 Polyfill 或者重复的代码。 @babel/plugin-transform-runtime 可以在代码中注入帮助函数（例如 _classCallCheck）以及其他运行时代码。它提供了一种轻量化的方式来使用这些功能，而不需要重复引入每个支持的新功能的 Polyfill。
-- ---
----- -------- ----- -
----- -------------------
-
-- ---
--- ---------------- - ---------------------------------------------------
-------- ----- -
------ ---------------- -----------
-
-------- ------ -
---- - -------------------------- -- -
----- -------------------
---
------ ---------------- -----------
-示例代码
-- -------
----- ------- -
------ - ---
------
-------- -
------ -------- -- ----------
-
-------- -
------ --------------
-
----- ---------- -
----- ------ - ----- --------------
------ -------
-
--- -------- - ---------- --------------------- -
经过 Babel 的处理，main.js 转换为以下代码：
---- --------
--- ----- -------
--- ------- - ---------------- ----------
--- ------- - ----- - ------------- ----------- - --------------------- -- -
-------- --------- -
--------------------- ---------
----------------- -
--------- -----
------ --
---
-
--------------------- --
---- ---------
------ -------- -------- -
------ -------- -- ----------
-
-- -
---- ---------
------ -------- -------- -
------ --------------
-
-- -
---- -----------
------ -------- -- -
--- --------- - ------------------ --------------------------------------------- --------- -
--- -------
------ -------------------------------- -------------- -
----- --- -
------ ---------- - ---------- -
---- --
--------- - --
------ --------------
---- --
------ - ----------
------ --------------------- --------
---- --
---- ------
------ ------------
-
-
-- -------- ------
----
-------- ---------- -
------ --------------------- -----------
-
------ ---------
---
----
------ --------
---- -- --------结论
在本文中，我们学习了 @ryo_suga/babel-preset-ryosuga 这个 Babel Preset，并了解了它包含的插件以及在实际开发中的应用场景。我们可以看到它可以为我们的项目提供很多有用的功能，同时它的使用也非常简单。我们期待更多的人使用它并为它做出贡献。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005550781e8991b448d23c4