在前端开发中，我们经常需要使用现成的第三方库或工具，这些工具大多发布在 NPM 上。其中，@gerhobbelt/babel-helper-replace-supers 是一个非常实用的包，它能够将 ES6 类的 super 关键字转换成 babel-helper-inherits 所需要的函数调用。本文将为大家介绍如何使用它。
安装
首先，我们需要使用 npm 将该包安装到我们的项目中。在终端中输入以下命令即可安装该包：
--- ------- ---------------------------------------
引入
安装完成之后，我们需要在项目中引入该包。在你需要使用该包的地方，添加以下代码即可引入：
------ ------------- ---- ------------------------------------------
用法
在引入该包之后，我们就可以通过调用 replaceSupers 方法将 super 关键字转换成函数调用。具体用法如下：
----- -------------- - ------------------ - ----------- -------------------------------------------------- --------- ----------- ------------------- ---- ---
其中，第一个参数 ast 是一个 AST，replaceSupers 方法会对它进行修改。第二个参数用于配置转换选项。
- methodPath: 转换 super 关键字所需的方法路径，默认为 babel-helper-replace-supers/lib/helpers/inherit。
- methodId: 对应上面所述路径中的函数名，默认为 inherits。
- allowMethodRewrite: 是否允许方法重写，如果为 true，则使用一个新的方法来替代原先的 super 调用。
示例
下面的示例演示了如何使用 @gerhobbelt/babel-helper-replace-supers，这个示例会将下面的 ES6 代码转换成 ES5 代码：
----- - -
------------- -
------ - --
-
----- -
--------------------
-
-
----- - ------- - -
------------- -
--------
------ - --
-
----- -
--------------------
------------
-
-转换后的代码如下：
---- --------
--- - - -------- -- -
-------- --- -
------ - --
-
--------------- - -------- ----- -
--------------------
--
------ --
----
--- - - -------- ---- -
----------- ----
-------- --- -
--- ------
-------------------- ---
----- - ------------------------------- ------------------------------
------- - --
------ ------
-
-------------- --
---- ------
------ -------- ----- -
--------------------
--- --------------- - ----------------------------
------------ - --------------- -- -----------------------------
-- -------------- -
----------------------------
-
-
----
------ --
-----可以看到，转换后的代码中，原本的 super 调用被替换成了 _super_proto.foo.call(this)。这就是使用 @gerhobbelt/babel-helper-replace-supers 的效果。
总结
本文介绍了如何使用 npm 包 @gerhobbelt/babel-helper-replace-supers，它是一个将 ES6 类的 super 关键字转换成 babel-helper-inherits 所需要的函数调用的实用工具。使用该工具可以更好地支持 ES6 语法，在代码转换时也会更加方便。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f02ef1b403f2923b035bde8